bootstrap中tr元素不支持margin,所谓“行间距”实为td/th的padding或border-spacing所致;应通过p-0、py-0调整单元格内边距,或重置border-spacing: 0,而非设置tr的margin。
bootstrap 表格行(tr)本身没有下边距
这是最容易误解的一点:tr 元素在 css 中不接受 margin,所以你给 tr 设置 margin-bottom 完全无效。看到的“行之间有空隙”,实际来自:
-
td或th的padding(默认 0.75rem) -
table的border-collapse: separate+border-spacing(Bootstrap 默认为collapse,但某些自定义样式可能改了) - 父容器或后续元素的外边距(比如
tbody后面跟着一个p或div)
真正起作用的是 td 和 th 的内边距
Bootstrap 的 .table 类会给单元格统一设 padding: 0.75rem。要缩小或消除“行间距感”,直接控制单元格内边距最有效:
- 用
p-0移除所有方向内边距:<td class="p-0">内容</td> - 只清垂直方向:
py-0(等价于padding-top: 0; padding-bottom: 0;) - 若需保留左右留白但压紧上下,写
py-0 px-2 - 注意:输入框、按钮等嵌套元素会继承父
td的padding,有时需额外加mt-0 mb-0或设margin: 0
border-spacing 导致的间隙容易被忽略
如果你或团队手动改过 table 的 border-collapse(比如设成 separate),那 border-spacing 就会生效——它控制的是单元格之间的距离,不是 tr 的 margin。
- 检查是否写了类似
table { border-collapse: separate; border-spacing: 0 0.5rem; } - 修复方式:显式重置
border-spacing: 0,或恢复border-collapse: collapse - Bootstrap 5 默认是
collapse,所以除非你主动改,否则不用管这个
别碰 tr 的 margin,也别用 mb-0 套在 tr 上
tr 是表格行盒(table-row),CSS 规范明确禁止对它设置 margin。即使你写了 <tr class="mb-0">,Bootstrap 的 <code>mb-0 类(对应 margin-bottom: 0 !important)也不会生效——浏览器直接忽略。
- 验证方法:打开 DevTools,选中
tr,看 computed 样式里margin-bottom是否显示为0px且带删除线 - 常见误操作:把
mb-0加到tr上,发现没用,然后怀疑 Bootstrap 版本或加载顺序——其实根源是语义错误 - 真要控制行与行的视觉距离,要么调
td/py,要么在tr后插入<div class="my-1"></div>这类分隔块(不推荐,破坏表格语义)
最稳妥的做法永远是:先确认间隙来源(DevTools 检查 td padding 和 table border-collapse),再针对性删 py-* 类或重置 border-spacing。强行给 tr 加 margin 是走不通的死路。











