复杂表格在移动端易崩因table是DOM协议而非静态容器：colspan/rowspan、thead/tbody混用及CSS/JS干扰会引发连锁错位；table-layout:fixed需配col定义列宽，合并单元格应谨慎处理，结构分层与可访问性设计至关重要。
为什么复杂表格在移动端改一次就崩？
因为多数人把 table 当成“静态容器”来写，却忘了它本质是一套有层级依赖的 DOM 协议：一旦嵌套 colspan/rowspan、混用 thead/tbody 和自定义 class，再叠加媒体查询或 JS 动态操作，任何一处宽度计算偏差或 CSS 优先级冲突都会引发连锁错位——不是样式没生效，是浏览器在 fixed 布局下根本无法回退重算。
table-layout: fixed 必须配 width，但别全写死
设 table-layout: fixed 后，浏览器只认第一行（thead tr:first-child 或 col）的宽度声明。常见错误是给所有 th 写 width: 20%，结果总和超 100%，剩余列被压缩到 0；或者只给关键列设宽，其他列靠默认均分，但在小屏下文字换行又撑开单元格。
- 推荐做法：用
col元素定义列宽（语义清晰、无渲染干扰），例如<col style="width: 15%"><col style="width: 25%"><col>，最后一列不设宽，自动占剩余空间 - 避免在
th上用min-width或flex，它们在table-layout: fixed下无效 - 真机测试时打开 Chrome DevTools 的「Rendering」面板，勾选「Paint flashing」，看哪些单元格在滚动时反复重绘——那是 width 计算不稳定的表现
带合并单元格的表格，移动端别硬撑
rowspan 和 colspan 在桌面端能省空间，在移动端反而成隐患：屏幕宽度一变，合并逻辑就失效，td 可能错位、边框断裂、甚至整行消失。这不是 CSS 能修的，是结构级不兼容。
- 简单合并（如表头跨列）可保留，但必须配合
scope="col"明确语义，否则 VoiceOver 读不出关联 - 数据行内跨行合并（如“姓名”占两行）建议拆成独立字段，用
data-*属性存原始关系，JS 渲染时再逻辑聚合 - 实在要保留，外层加
overflow-x: auto容器，并用@media (max-width: 480px)强制隐藏该列，用data-label属性把标题塞进对应单元格，避免信息丢失
维护成本高的根源：HTML 结构没分层
一个 8 列 × 20 行的表格，如果所有 tr 都直接写在 tbody 里，改第 5 列样式就得全局搜 td:nth-child(5)；加个筛选功能又要遍历所有 tr。这不是代码量问题，是结构没隔离。
立即学习“前端免费学习笔记（深入）”；
- 把每类数据抽成独立
template，用id区分（如<template id="user-row">...</template>），JS 渲染时按需实例化 - 复杂表头（多级嵌套）用
thead+colgroup分离视觉与结构，colgroup控制列宽，thead只管展示 - 所有可交互单元格（如编辑按钮、状态开关）必须包裹在
button或带role="button"的div里，且clientWidth × clientHeight ≥ 48×48px，否则手指点不准，真机上连点击事件都触发不了
真正难的不是让表格在 iPhone 上显示出来，而是改完一行 CSS 后，不翻车、不漏读、不误触——这取决于你有没有把结构当成协议来维护，而不是当成样式容器来堆砌。
