table row 设置边框
时间: 2023-07-30 07:04:31 浏览: 47
如果你是在使用 HTML 的 `<table>` 元素,你可以使用 CSS 来给表格的行添加边框。示例代码如下:
```html
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>
<style>
table {
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid #ebeef5;
}
table th,
table td {
border: 1px solid #ebeef5;
padding: 8px;
}
</style>
```
在上面的代码中,我们使用了 `border-collapse` 属性来合并表格边框,使边框看起来更加连续。然后,我们给表格的每一行设置了 `border-bottom` 样式,使每行之间有一条细线作为分割线。最后,我们给表格的每个单元格设置了 `border` 样式和 `padding` 样式,使表格看起来更加整齐。
如果你只想给表格的第一行或最后一行添加边框,可以使用 `:first-child` 或 `:last-child` 选择器来选择相应的行,例如:
```css
table tr:first-child {
border-top: 1px solid #ebeef5;
}
table tr:last-child {
border-bottom: 1px solid #ebeef5;
}
```
这样,表格的第一行会有一条细线作为上边框,最后一行会有一条细线作为下边框。