Bootstrap 的 .table 类本身不提供响应式能力，需用 .table-responsive 容器包裹整个 table 实现横向滚动；.table-striped 和 .table-hover 需 tbody 才生效；隐藏列推荐用 d-none d-md-table-cell；性能优化可关闭 .table-bordered 或用 box-shadow 替代边框。
用 .table 类就能让表格响应式？别信
Bootstrap 的 .table 本身不带响应式能力，直接加它只负责样式美化，小屏下照样横向溢出。真要响应式，得靠外层容器兜底。
最稳妥做法是套一层 .table-responsive —— 它本质是个带 overflow-x: auto 的 wrapper，让表格在窄屏下可横向滚动，而不是崩布局。
- 必须包裹整个
<table>，不能只包<tbody>或某几列 - Bootstrap 5 中该类默认作用于所有断点；若只想在
sm及以下生效，改用.table-responsive-sm - 注意：iOS Safari 对
overflow-x: auto的滚动惯性支持弱，用户可能误以为“卡住”，实际需要用力拖一下
.table-striped 和 .table-hover 能一起用吗？能，但有前提
可以叠加，但前提是表格必须有 <tbody>。Bootstrap 的条纹和悬停效果都依赖 <tbody> 内的 <tr> 元素来选中，没它就失效。
常见错误是手写表格时漏掉 <tbody>，只留 <thead> 和 <tr> 平级——这时 .table-striped 看不出条纹，.table-hover 鼠标移入也没反应。
- 检查浏览器开发者工具里，
<tr>是否真的在<tbody>下（不是被自动补全，而是你写的 HTML 明确包含） - 如果用 JS 动态渲染表格，确保插入的 HTML 字符串含
<tbody>，或用document.createElement('tbody')手动创建再 append -
.table-hover在触摸设备上无效果，别指望它在手机上“悬停”
移动端想隐藏某些列？别硬删 DOM，用 d-none d-md-table-cell
响应式表格最常遇到的需求是：PC 显示全部列，手机只留关键字段（比如隐藏“操作”“创建时间”）。直接 JS 删列会破坏数据一致性，也难维护。
Bootstrap 提供了显示/隐藏工具类组合，比媒体查询写法更轻量、语义更清。
- 给要隐藏的
<th>和对应<td>同时加d-none d-md-table-cell：在md及以上显示为单元格，在更小屏幕完全隐藏 - 避免只加
d-sm-none——它在sm断点就隐藏了，而sm屏宽才 576px，很多平板仍属此范围 - 如果列内容是纯图标（如编辑/删除按钮），建议额外加
sr-only或aria-label，否则隐藏后无障碍访问会丢失操作含义
表格内容太多导致加载慢？先关掉 .table-bordered
这不是玄学。带边框的表格在渲染时，浏览器要为每个单元格单独绘制 border，尤其是列数多、行数超百时，.table-bordered 会明显拖慢首次渲染和滚动帧率。
真实项目里，borderless 表格 + 左右 padding + 细分色块（如用 .table-striped 或背景色区分状态）往往比满屏细线更易读，性能也更好。
- 如果设计稿强制要求边框，请优先考虑用
box-shadow: inset 0 -1px 0 #dee2e6模拟下边框，只画一条线，开销远小于每 cell 四边 - 避免在
.table-responsive容器内再嵌套其他浮动或定位元素，这会让滚动区域重绘更频繁 - 超过 200 行的数据表，建议上虚拟滚动（如
react-window或原生IntersectionObserver），CSS 响应式解决不了性能问题
响应式表格真正的难点不在类名怎么写，而在“哪些信息必须始终可见”“哪些交互在小屏上根本没法做”。类名只是工具，决策才决定最终体验。
