我有一个 HTML 表格元素,我想在列之间添加边距,所以我使用了这些 css 属性:
table {
border-collapse: separate;
border-spacing: 36px 0px;
}
现在我想将 border-bottom 添加到整行,包括标题和正文中的每个 tr,但边框没有出现。 我用过:
tr {
border-bottom: 1px solid blue;
}
它仅在我使用时出现:
table {
border-collapse: collapse;
}
但是我不会在列之间留边距。
我添加了我的 DEMO here .
最佳答案
您可以使用 :after
伪类来设置样式,如下所示:
body {
background: #eee;
}
.mytable{
border-collapse: separate;
background-color: white;
border-spacing: 36px 0px;
position: relative;
overflow: hidden;
}
.mytable td,
.mytable th {
border-left: 1px solid black;
border-right: 1px solid black;
}
.mytable th:after,
.mytable td:after {
position: absolute;
background: blue;
margin-top: 18px;
content: '';
height: 1px;
right: 0;
left: 0;
}
<table class="mytable">
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
</tr>
</thead>
<tbody>
<tr>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
</tr>
</tbody>
</table>
关于html - CSS 表格 - 添加边距列和行 border-bottom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40604231/