如何为 Bootstrap 表行添加边距？

Posted 2023-03-05

【中文标题】如何为 Bootstrap 表行添加边距？

【英文标题】：How can I add margin to Bootstrap table rows?

【发布时间】：2021-08-08 17:34:28

【问题描述】：

在条纹表中，我想在两行之间添加额外的空间而不改变条纹颜色。在第一个总和行之后，我需要在第二个数据块开始之前有一个额外的空间。不幸的是，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>

【参考方案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>

【讨论】：

Wooo 从未听说过多个 tbody-s。嗯。它与html兼容吗？然后听起来很棒！

尝试了多个tbody，但它们之间没有多余的间隙。添加了 但什么也没做。 它使用 bs 标准以外的其他样式。使用预定义样式无法解决？ 我从来没有做过没有加载自定义样式表的 Bootstrap 项目。 Bootstrap 并不是一个神奇的“无所不能”的魔杖。如果这是一个问题，你应该在你的问题帖子中更清楚地说明。 你的两个答案解决了这个问题。多个 tbody （重置行颜色）和间隔样式一起是一个很好的解决方案。感谢您的宝贵时间！