代码之家 › 专栏 › 技术社区 › Amine Messaoudi

黑框表行间距

border-collapse border-spacing html

0

Amine Messaoudi · 技术社区 · 4 年前

我有一个表,其中我需要行之间的空间和每行周围的黑色边框

.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中,它的行为与第一个图像完全相同。我怎样才能把两者结合起来?

1 回复 | 直到 4 年前

1

mplungjan Gvidas 4 年前

这样行吗?

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