带有黑色边框的表格行之间的空间

问题描述

我有一个表格，我想在其中的行之间留出空间，每行周围都有一个黑色边框

.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>