如何为Bootstrap条纹表格行添加间距？解决tr元素无法使用mb-3类的问题

你说得没错，Bootstrap的mb-3这类margin类确实对<tr>元素不起作用——因为表格行是表格布局的一部分，margin属性在表格元素上默认是不生效的。下面给你几个实用的解决方案，既能在汇总行后添加额外间距，又不会破坏条纹样式：

方案1：给汇总行单元格添加底部内边距（推荐） #

这种方法不需要额外的空行，直接通过调整汇总行单元格的padding来拉开间距，完全不影响条纹效果：

首先添加自定义CSS：

/* 自定义汇总行的底部间距 */
.summary-row td {
  padding-bottom: 1.5rem; /* 可以根据需求调整数值 */
}

然后修改你的表格代码，给汇总行加上summary-row类：

<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">
<style>
.summary-row td {
  padding-bottom: 1.5rem;
}
</style>
<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="summary-row">
      <td><strong>Sum of data1</strong></td>
      <td>sum1</td>
      <td>sum1</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>

方案2：使用自定义空行（适合需要明显分隔的场景） #

如果你更倾向于用空行来分隔，只要给空行添加样式去掉背景色，就不会影响条纹效果：

添加CSS：

.spacer-row {
  height: 1.5rem; /* 控制空行高度 */
  background-color: transparent !important; /* 强制去掉背景色，避免显示条纹 */
}

然后修改表格里的空行：

<tr class="spacer-row">
  <td colspan="3"></td>
</tr>

为什么mb-3不生效？ #

简单说，<tr>属于表格布局元素，浏览器默认不会对表格行应用margin属性——margin主要作用于块级元素（比如<div>）。Bootstrap的margin类都是基于块级元素设计的，所以直接给tr加mb-3自然没效果。

内容的提问来源于stack exchange，提问作者Zoltan Hernyak