Bootstrap表格中如何移除指定tr元素的中间边框？

我之前也踩过这个坑！Bootstrap的表格边框样式默认是挂载在<td>和<th>元素上的，直接给<tr>加边框移除样式往往没效果，得针对子元素来调整才行。下面给你两个靠谱的解决方案：

方案一：自定义CSS类（最灵活） #

先给你想要移除边框的<tr>加一个专属类，比如no-middle-border，然后通过CSS精准覆盖Bootstrap的默认样式：

情况1：移除该与前后行之间的上下边框（也就是你说的“中间边框”） #

/* 确保选择器优先级足够，覆盖Bootstrap默认样式 */
.table tr.no-middle-border td,
.table tr.no-middle-border th {
  border-top: none;
  border-bottom: none;
}

情况2：移除该内部单元格之间的左右竖边框 #

如果你说的“中间边框”是指该行内部单元格之间的竖线，就用这个：

.table tr.no-middle-border td {
  border-left: none;
  border-right: none;
}

示例HTML #

<table class="table table-bordered">
  <tr>
    <td>普通行</td>
    <td>普通行</td>
  </tr>
  <!-- 目标行，添加自定义类 -->
  <tr class="no-middle-border">
    <td>无中间边框的行</td>
    <td>无中间边框的行</td>
  </tr>
  <tr>
    <td>普通行</td>
    <td>普通行</td>
  </tr>
</table>

方案二：利用Bootstrap内置工具类（简洁但针对性弱） #

Bootstrap提供了border-0工具类，但要注意：直接给<tr>加这个类没用，因为边框是在<td>/<th>上的。所以你需要给目标行里的每个单元格都加上对应边框移除类：

<tr>
  <td class="border-top-0 border-bottom-0">无上下边框的单元格</td>
  <td class="border-top-0 border-bottom-0">无上下边框的单元格</td>
</tr>

这种方法适合简单场景，但如果行内单元格多的话，写起来比较繁琐，还是方案一更高效。

注意事项 #

1. 确保你的自定义CSS代码放在Bootstrap样式文件的后面，这样才能覆盖默认样式；
2. 如果用了.table-striped、.table-hover等变体，记得把选择器写得更具体（比如.table-striped tr.no-middle-border td）。

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