三列六行的表格,每个只有一个边框线
时间: 2024-09-18 17:05:39 浏览: 32
html做表格只显示表格的外边框
如果你想创建一个只有顶部和底部边框线的简单三列六行表格,可以结合`border-collapse`属性来控制边框合并,同时为每一行设置单独的`<tr>`的边框。这里有一个示例:
```html
<style>
table {
border-collapse: separate; /* 保持单独的边框 */
width: 100%; /* 可选,给表格一个固定的宽度 */
}
th, td {
border: 1px solid #ccc; /* 设置所有单元格的边框样式 */
padding: 8px;
}
tr:nth-child(even) { /* 偶数行只保留底部边框 */
border-bottom: 1px solid #ccc;
}
tr:last-child { /* 最后一行保留顶部和底部边框 */
border-top: none;
border-bottom: 2px solid #ccc; /* 更粗的底边框作为结束标记 */
}
</style>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<!-- ... 六行数据 ... -->
<tr>
<td>最后一行数据1</td>
<td>最后一行数据2</td>
<td>最后一行数据3</td>
</tr>
</table>
```
以上代码会创建一个只有顶部和底部边框的三列六行表格。每一行交替显示边框,偶数行只显示底部边框。
阅读全文