html - 如何为 Bootstrap 表行添加边距？

Question

在条纹表中，我想在两行之间添加额外的空间而不改变条纹颜色。在第一个总和行之后，在第二个数据块开始之前我需要一个额外的空间。不幸的是，mb-3 不适用于 tr 元素。像这样的问题有什么好的解决方案？

<table class="table table-striped">
  <tr class="mb-3">

感谢您的建议!
可以找到代码示例: https://www.codeply.com/p/kU5U99YOKU

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<table class="table table-striped">
  <thead>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
    <!-- as the mb-3 wont work I added this but this is wrong -->
    <tr>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用多个 tbody 元素，这可能是一种在语义上更正确的方法。使用边框作为间隔:

tbody {
  border-bottom: 20px solid pink;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<table class="table table-striped">
  <thead>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
</table>

您使用间隔行的策略可行，但您需要使用 aria-hidden 将它们从辅助技术中隐藏起来。属性:

.spacer td {
  background: pink;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<table class="table table-striped">
  <thead>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
    <tr class="spacer" aria-hidden="true">
      <td colspan="3"></td>
    </tr>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
    <tr class="spacer" aria-hidden="true">
      <td colspan="3"></td>
    </tr>
    <tr>
      <td>data1</td>
      <td>data1</td>
      <td>data1</td>
    </tr>
    <tr>
      <td>data2</td>
      <td>data2</td>
      <td>data1</td>
    </tr>
    <tr class="mb-3">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</td>
    </tr>
    <tr class="spacer" aria-hidden="true">
      <td colspan="3"></td>
    </tr>
    <tr>
      <td>data3</td>
      <td>data3</td>
      <td>data3</td>
    </tr>
    <tr>
      <td><strong>Sum of data3</strong></td>
      <td>sum2</td>
      <td>sum2</td>
    </tr>
  </tbody>
</table>