小屏下表格行高与对齐应通过媒体查询统一调整td/th的padding和vertical-align，避免使用height、line-height及嵌套flex，优先控制内边距并显式设置vertical-align: middle。

小屏下改行高，别碰 height 和 line-height

直接给 .table 或 tr 设 height 会导致文字截断、响应式错乱；设 line-height 对多行内容不可靠，且易和字体大小冲突。Bootstrap 的行高本质由 padding 控制，小屏下也一样。

• 小屏下优先用媒体查询覆盖 td 和 th 的上下内边距
• 推荐写法：

  @media (max-width: 768px) {
  .table td, .table th {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  }
  }

• 若用了 .table-sm，它本身已缩窄 padding，此时再减可能过小，建议先移除该类再统一调
• 注意：加 !important 是因为 CDN 加载顺序不可控，尤其在未使用 Sass 构建时

垂直对齐失效？大概率是 vertical-align 被覆盖了

小屏下常见问题不是“没居中”，而是嵌套元素（如 div、button、图片）的默认 vertical-align: baseline 拉低了视觉基准线，或者自定义 CSS 把 vertical-align 重置为 inherit 或 top。

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

• 必须显式作用于 td 和 th，不能加在 tr 上
• 稳妥写法：

  @media (max-width: 768px) {
  .table td, .table th {
  vertical-align: middle !important;
  }
  }

• 如果单元格里有图片，建议同时给 img 加 align-middle 类，避免基线空隙
• 避免在 td 内套 div 后又设 display: flex——这会让 vertical-align 失效，此时应改用 d-flex align-items-center 替代

配合“只显示前三列”时，行高和对齐容易连环崩

当小屏下用 th:nth-child(n+4), td:nth-child(n+4) 隐藏列时，display: none 不影响表格渲染逻辑，但会改变剩余列的宽度分配，进而让 padding 压缩后的内容换行或撑高，造成行高不一致、对齐错位。

• 给前三列加 min-width: 80px（或按内容定），防文字折行导致高度突变
• 所有前三列的 td/th 必须统一加 vertical-align: middle，否则某列因内容短而“看起来偏上”
• 测试时重点看第一行：如果表头 th 和数据行 td 高度不一致，大概率是其中一组没同步应用 padding 或 vertical-align 规则

小屏表格的行高和对齐不是孤立问题，它们和列显隐、内容类型、嵌套结构强耦合。最稳妥的做法是把 padding 和 vertical-align 放在同一媒体查询块里统一控制，而不是拆成多个零散样式。