如何解决带有黑色边框的表格行之间的空间
我有一个表格,我想在其中的行之间留出空间,每行周围都有一个黑色边框
.table {
border-collapse: collapse !important;
border-spacing: 0 5px !important;
}
.table tr {
border: 1px solid #000 !important;
}
<table class="table table-borderless">
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><a href="#"><i class="fas fa-edit"></i></a></td>
<td><a href="#"><i class="fas fa-trash"></i></a></td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><a href="#"><i class="fas fa-edit"></i></a></td>
<td><a href="#"><i class="fas fa-trash"></i></a></td>
</tr>
</tbody>
</table>
-
border-collapse = collapse
: 每行有一个黑色边框,但行与行之间没有空格
-
border-collapse = separate
: 行与行之间有空格,但每行周围没有黑色边框
如果我从 css 中删除 border-collapse
,它的行为与第一张图片完全一样。我怎样才能将两者结合在一起?
解决方法
这样可以吗?
.table {
border-collapse: collapse !important;
border-spacing: 0 5px !important;
}
.table tr {
border: 1px solid #000;
}
.spacer { border-left:none !important; height:20px }
<table class="table table-borderless">
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><a href="#"><i class="fas fa-edit"></i></a></td>
<td><a href="#"><i class="fas fa-trash"></i></a></td>
</tr>
<tr class="spacer"><td colspan="4"></td></tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td><a href="#"><i class="fas fa-edit"></i></a></td>
<td><a href="#"><i class="fas fa-trash"></i></a></td>
</tr>
</tbody>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。