必须用.table-responsive容器包裹整个<table>，通过overflow-x: auto实现移动端横向滚动；禁用table-layout: fixed，避免列宽冲突；配合data-label和CSS伪元素保留语义，超5列建议卡片化替代表格。
移动端表格溢出时别硬塞，先加 .table-responsive 容器
表格在手机上横向滚动困难，不是因为内容太多，而是容器没给它“滑动资格”。Bootstrap 的 .table-responsive 是最轻量、兼容性最好的兜底方案——它本质就是个 div 套一层 overflow-x: auto，但做了关键优化：保留原生表格语义、不干扰内部样式、支持触屏惯性滚动。
- 必须包裹整个
<table>，不能只包<tbody>或某几列 - 不要和
table-layout: fixed混用，否则列宽计算冲突，小屏下反而错位 - 若表格内有按钮或链接，需确保点击区域足够大（至少 44×44px），否则 iOS Safari 会忽略小触点
- 视觉提示很重要：加
border-bottom或阴影暗示“可滑动”，否则用户根本不知道要左右拖
列太多时隐藏非核心字段，用 data-label 保语义
单纯用 display: none 隐藏列，会让屏幕阅读器丢失信息，也破坏数据完整性。正确做法是让单元格视觉隐藏但语义保留。
- 给非关键列的
<th>和对应<td>加 class，比如class="hide-on-mobile" - 在
<td>上加data-label="操作"，CSS 中用::before显示该标签，例如：td.hide-on-mobile::before { content: attr(data-label) ": "; font-weight: bold; } - 媒体查询断点建议设在
max-width: 768px，而非 480px——平板横屏也常需折叠 - 避免隐藏主键、状态、时间等业务强相关字段；“操作”“创建人”“ID”这类辅助列优先折叠
超过 5 列就考虑卡片化，别死守 <table> 结构
当表格列数 ≥ 6 或字段类型混杂（文本+数字+状态徽标+操作按钮）时，<table> 在移动端已不是最优解。卡片布局能天然适配小屏，且更利于 JS 动态控制。
- 每行
<tr>改为<article class="card">，每个<td>变成<div class="field"><span class="label">姓名</span><span class="value">张三</span></div> - 用 CSS Grid 控制卡片内字段排列，比如
grid-template-columns: 1fr 2fr让标签窄、值宽 - 保留原表格的
aria-labelledby或role="rowgroup"属性，确保无障碍仍可识别数据关系 - 切换逻辑建议用 JS 检测容器宽度，而非纯 CSS 媒体查询——这样在浏览器缩放时也能响应
多级表头或合并单元格时，放弃 rowspan/colspan 直接渲染
rowspan 和 colspan 在响应式场景下极易失控：小屏缩放后列宽重算、打印时截断、JS 动态增删行后错位。复杂结构应拆解为语义清晰的嵌套或绝对定位。
立即学习“前端免费学习笔记（深入）”；
- 多级表头改用
<thead>内嵌<tr>+grid-column控制跨列，避免colspan - 跨行事件（如日程表中的会议）用绝对定位叠加在表格骨架上，主表只负责网格线和日期
- 合并单元格数据改用 JSON 扁平化存储，前端按需聚合渲染，而不是靠 HTML 属性硬撑
- 如果必须用
rowspan，务必配合table-layout: fixed和显式width设置，否则 Chrome 和 Safari 渲染差异极大
