Bootstrap 4表格行间距设置失效问题求助

我完全懂你遇到的头疼问题——Bootstrap自带的间距类（比如m-x、p-x）直接套在<tr>或<tbody>上根本没反应，只能在每个<td>里硬塞div来实现效果，这显然不是最优解。

为什么默认间距类不生效？ #

核心原因是<tr>默认的display属性是table-row，<tbody>是table-row-group，这两种布局类型不支持margin属性，padding的表现也完全不符合预期，所以Bootstrap的通用间距类在这些元素上起不了作用。

推荐解决方案：自定义表格间距样式 #

我们可以通过调整表格的边框规则，配合少量自定义CSS来实现行间距效果，不需要额外嵌套div，完美贴合你的需求：

1. 修改HTML代码

给表格添加自定义类table-row-spacing，并把阴影、圆角样式移到<tr>上（因为<tbody>吃不上这些样式）：

<div class="table-responsive">
  <table id="example" class="table table-hover table-row-spacing" style="width:100%; margin-top:4%">
    <thead class="thead" style="background-color:#5AC5F1;color:white;">
      <tr>
        <th scope="col">Event Name</th>
        <th scope="col">Start Date</th>
        <th scope="col">End Date</th>
        <th scope="col">Role</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      @foreach (var item in Model._EventsLines) {
      <tr class="shadow-sm rounded">
        <td><a href="#myModal" class="myModal" data-toggle="modal" id="@item.EVL_id" onclick="GetEventsDetails(@item.EVL_id)">@item.EVL_nameEVT</a></td>
        <td>@item.EVL_dateStart.ToShortDateString()</td>
        <td>@item.EVL_dateEnd.ToShortDateString()</td>
        <td>@item.EVL_role</td>
        <td>@item.EVL_status</td>
      </tr>
      }
    </tbody>
  </table>
</div>

小细节：这里把<th>的scope="row"改成了scope="col"，因为这些是列表头，语义上更准确。

2. 添加自定义CSS

通过修改表格的border-collapse和border-spacing属性来实现行间距，同时调整行的背景和边框：

.table-row-spacing {
  /* 取消表格边框合并，启用单元格间距 */
  border-collapse: separate;
  /* 第一个值是水平间距，第二个是垂直行间距，按需调整数值 */
  border-spacing: 0 12px;
}

.table-row-spacing tbody tr {
  /* 给每行添加背景色，和表格背景区分开 */
  background-color: #ffffff;
}

/* 去掉行内单元格的默认顶部边框，避免视觉冲突 */
.table-row-spacing tbody tr td {
  border-top: none;
}

效果说明 #

这个方案会让每行之间产生清晰的间距，同时保留table-hover的悬停效果，阴影和圆角也能正确应用在每行上，完全符合你想要的效果，而且不需要破坏表格的原生结构。

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