Bootstrap表格小屏横向滚动需用.table-responsive包裹，固定表头推荐position:sticky，合并单元格要控范围并加aria-label，升级5.3注意padding变更。
表格在小屏上横向滚动不生效？
bootstrap 默认的 .table 类不会自动给表格加横向滚动容器，小屏下内容溢出直接被裁掉，用户根本看不到右侧列。
必须手动用 .table-responsive 包裹表格，它会给父容器设 overflow-x: auto 和 -webkit-overflow-scrolling: touch（iOS 滚动更顺）。
- 只对
<table>生效，别套在<div class="card">外层就以为够了 - 如果表格嵌在
.modal或.dropdown-menu里，要额外检查父容器是否设置了max-width或overflow: hidden，会截断滚动条 - Vue/React 中动态渲染表格后加这个类，得确保 DOM 已挂载，否则 JS 可能拿不到真实宽度
固定表头 + 滚动正文怎么不卡顿？
原生 Bootstrap 不提供固定表头，硬用 position: sticky 在 Safari 15.4 之前有兼容问题，且表格行高不一致时容易错位。
推荐用 sticky-header 的轻量方案：给 <thead> 加 position: sticky; top: 0; background: white; z-index: 10，同时确保 <tbody> 有明确高度和 overflow-y: auto。
-
<thead>必须和<tbody>在同一表格内，拆成两个<table>会导致列宽不同步 - 列宽要用
width或min-width固定，避免内容撑开后表头和正文列不对齐 - Chrome 115+ 对
sticky表格单元格支持更好，但 IE 完全不支持，需降级为 JS 监听 scroll 手动偏移
合并单元格（rowspan/colspan）破坏响应式布局？
合并单元格本身不影响响应式，但配合 .table-responsive 时，如果合并跨度过大，小屏下横向滚动后容易找不到对应关系，视觉混乱。
关键不是禁用合并，而是控制合并范围和补充语义：
- 避免
rowspan > 3或colspan > 2，尤其在移动端优先的表格中 - 用
aria-label或title给合并单元格加说明，比如<th rowspan="2" aria-label="销售额汇总，含Q1-Q4">全年</th> - 如果数据本质是分组聚合，考虑改用折叠面板（
accordion）替代合并，可读性更高
Bootstrap 5.3 表格类与自定义 CSS 冲突常见点
升级到 Bootstrap 5.3 后，.table-sm 的 padding 变成了 0.25rem，而很多老项目自定义了 .table td { padding: 4px }，结果小屏下文字挤在一起看不清。
查冲突最直接的方式是打开 DevTools，选中单元格，看 Computed 面板里 padding 最终值从哪来。
- 优先用 Bootstrap 的间距工具类（如
py-1）覆盖，而不是写!important - 如果用了 SCSS，重载变量时注意
$table-cell-padding-y和$table-cell-padding-x是分开的 - 第三方插件如 DataTables 的样式常带
!important，此时得提高自己 CSS 选择器权重，比如加.my-table .table tbody td
复杂表格真正的难点不在类名堆砌，而在列语义是否清晰、小屏下信息是否可定位。多一列“操作”按钮在桌面端很自然，放到手机上可能就得收进 … 下拉菜单里——这不是响应式失效，是交互逻辑没跟着缩放。
