Bootstrap修改Table表格每行高度和垂直对齐的方法

优先通过调整td/th的padding控制行高，而非height或line-height；垂直对齐问题多因vertical-align被覆盖，应显式设middle并加!important；响应式下避免直接设table高度，Sass项目可修改$table-cell-padding-y变量统一调整。

Table 行高设置：优先改 td 和 th 的 padding

bootstrap 默认靠 padding 控制行高，不是 line-height 或 height。直接设 height 容易破坏响应式或导致文字截断；设 line-height 对多行内容不可靠。

推荐做法是覆盖 Bootstrap 的默认 padding 值：

• .table td, .table th 默认是 padding: 0.75rem 1.25rem（v5.3）
• 减小 padding-top 和 padding-bottom 可压缩行高，比如改成 0.375rem
• 加个 !important 确保覆盖（尤其用 CDN 时 CSS 加载顺序难控）

.table td,.table th {  padding-top: 0.375rem !important;  padding-bottom: 0.375rem !important;}

垂直对齐失效？检查是否被 align-middle 或 vertical-align 冲突

Bootstrap 的 .align-middle 类只作用于 td/th，但如果你手动加了 vertical-align: top 或其他值，它会覆盖默认行为。

常见问题场景：

• 单元格里嵌套了 div、button 或图片——这些元素默认 vertical-align: baseline，拖低整体对齐线
• 用了 .table-sm 却又额外加 vertical-align，造成冗余或冲突
• 自定义 CSS 中写了 td { vertical-align: inherit; }，把 Bootstrap 的 middle 给重置了

稳妥写法：显式声明 vertical-align: middle 并确保它生效：

.table td,.table th {  vertical-align: middle !important;}

响应式表格下 table-responsive 会影响高度计算

当容器加了 .table-responsive，内部 table 会被包进一个 div，且该 div 设了 overflow-x: auto。此时如果强行设 height 或 min-height 到 table 上，可能触发滚动条错位或高度塌陷。

正确思路是：

• 行高调整仍走 padding 方案，不要碰 table 自身高度
• 若需固定行高（比如配合虚拟滚动），应在 tbody tr 上设 height + box-sizing: border-box，并同步调低 padding
• 避免在 .table-responsive 容器上设 max-height，除非你明确需要截断滚动

用 Sass 主题变量批量改行高（仅限源码构建项目）

如果你用的是 Bootstrap 源码（npm + Sass），可以直接改变量，一劳永逸：

• $table-cell-padding-y 控制上下内边距，默认 0.75rem
• $table-cell-padding-x 控制左右，默认 1.25rem
• 改完重新编译 CSS，所有 .table 都会生效，包括 .table-sm（它基于变量缩放）

示例（_custom.scss）：

$table-cell-padding-y: 0.375rem;@import "bootstrap/scss/bootstrap";

注意：.table-sm 会按比例缩小（如乘以 0.8），所以它的实际 padding 是 0.3rem，不是硬编码值。

真要微调每行高度，别迷信 height，padding 是唯一稳定可控的入口；垂直对齐出问题，八成是 vertical-align 被某层样式悄悄覆盖了。