小屏幕表格重叠的根本原因是浏览器在窄宽下强行渲染二维结构，必须启用table-layout:fixed并配合<col>定义严格100%列宽、data-label静态写入、隐藏thead及校验单元格总数一致。
小屏幕下表格内容重叠，根本不是“样式没调好”，而是浏览器在有限宽度里强行塞入二维结构导致的必然结果。直接加 overflow-x: auto 或硬设 font-size 只能缓解表象，不解决列宽失控、文本换行错位、合并单元格错行这些底层问题。
table-layout: fixed 是必须打开的开关
默认的 table-layout: auto 会让浏览器逐列扫描所有单元格内容来决定宽度——长 URL、JSON 片段、未断行中文段落会瞬间撑爆整列。一旦启用 table-layout: fixed，宽度就只认第一行（或 <col>）的声明，后续内容再长也不会影响列宽分配。
- 必须配合明确的列宽定义：用
<col>标签比在每个<th>上写style="width: 20%"更可靠，避免因首行缺失<th>导致规则失效 - 百分比总和必须严格等于 100%，比如 3 列就写
<col style="width: 30%"><col style="width: 40%"><col style="width: 30%">，少 1% 都可能让最后一列被压缩变形 - 对含长文本的列（如日志、链接），额外加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis，否则文字会溢出并干扰相邻单元格
data-label + display: block 堆叠时别漏掉 <thead> 隐藏
把 <tr> 设为 display: block、<td> 设为 display: block 后，如果没隐藏 <thead>，表头会和每条数据的伪标题重复堆叠——用户看到的是“状态已发货 状态待审核 状态已取消”，而不是“状态：已发货”。
- 必须加媒体查询隐藏
<thead>：@media (max-width: 768px) { thead { display: none; } } -
data-label属性得静态写死在 HTML 里，别靠 JS 注入——SSR 渲染时不存在 JS，SEO 也抓不到动态内容 - 避免用
float或inline-block实现堆叠：窄屏下换行逻辑不可控，display: block才能保证每个<td>占满一行
rowspan/colspan 错位本质是单元格总数不一致
合并单元格后内容重叠，90% 情况下不是 CSS 问题，而是某一行实际渲染出的单元格数量和其他行不一致。浏览器会按“逻辑列数”补空单元格，但补的位置可能错乱，导致后续 <td> 错位覆盖。
立即学习“前端免费学习笔记（深入）”；
- 先数出最宽的一行有多少列（比如 5 列），然后确保
<tbody>里每一行都显式包含 5 个<td>（含colspan="2"的算作占 2 个位置，需补足剩余） - 避免
<thead>用rowspan+<tbody>用colspan的组合——这种嵌套会让浏览器解析器彻底迷失索引 - 调试时右键检查元素，看开发者工具里渲染出的实际
<td>结构，而不是只盯着源码里的colspan数字
真正难处理的不是怎么让表格“看起来不重叠”，而是当列数超过 5、存在跨行合并、且要兼容 iOS Safari 的旧版本时，display: block 堆叠和 table-layout: fixed 的组合行为会有细微差异——这时候得靠真实设备真机测试，模拟器往往骗人。
