我有一个表格,我想要在其中的行之间留有空间,并且每行周围都有一个黑色边框
.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
: 是行之间的空间,但每行周围没有黑色边框
如果我border-collapse
从 css 中删除,它的行为与第一张图像完全相同。我怎样才能将两者结合在一起?