我有一个表格,我想在其中的行之间留出空间,每行周围都有一个黑色边框
.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
,它的行为与第一张图片完全一样。我怎样才能将两者结合在一起?