table标签不支持自动跨行列合并，需手动设置rowspan/colspan；动态数据易错位，应预处理结构；多级报表宜用单层table+多thead/tbody；导出excel需js手动mergecells；小屏应转卡片式语义结构。
table 标签本身不支持跨行列合并的自动计算
直接写 <table> 只能靠手动写 <code>rowspan 和 colspan 实现合并单元格，浏览器不会根据数据内容自动推导。比如销售报表中“华东大区”下有 5 个省，就得手动给对应 <th> 或 <code><td> 加 <code>rowspan="5"，一旦数据动态增减，HTML 就会错位。
常见错误现象：rowspan 值写错、合并后单元格内容错行、打印时分页断开合并区域、用 CSS display: grid 覆盖 <table> 导致语义丢失。
<ul>
<li>真实报表场景（如财务多级汇总）建议先在 JS 中预处理数据结构，生成带层级标记的数组，再映射为带正确 <code>rowspan/colspan 的 HTML
colspan 跨太多列——超过 6 列时屏幕缩放或小屏设备易出现横向滚动不可控scope="row" 或 scope="col"，否则读屏软件无法关联表头与数据单元格嵌套 table 在复杂报表里反而增加维护成本
有人用外层 <table> 控制大区，内部每个大区再套一个 <code><table> 展示省份明细，看似结构清晰，但带来三个硬伤：语义混乱（<code><table> 应表达二维关系，不是容器）、CSS 定宽困难（内层 table 宽度受外层约束）、打印分页时内层 table 容易被整个截断到下一页。
<p>更稳妥的做法是用单层 <code><table> + 多级 <code><thead> 和 <code><tbody> 分组，配合 <code>border-collapse: collapse 和细线边框视觉模拟嵌套感。
- 用多个
<thead> 是合法 HTML5 写法，但需确保每个 <code><thead> 都包含完整列数，否则表格渲染异常 <li>不要给 <code><tbody> 设置固定高度并开启 <code>overflow-y: auto——这会让表头和内容不同步滚动，应改用 sticky header 方案 - 若必须分组折叠，优先用 JS 控制
<tbody> 的 <code>display状态，而不是删/加 DOM导出 Excel 时 colspan/rowspan 显示错乱怎么办
用
SheetJS（xlsx.js）导出时，rowspan和colspan不会被自动识别为 Excel 的「合并单元格」，默认只导出左上角单元格值，其余为空。这是最常被忽略的兼容点。解决方法不是放弃
<table>，而是导出前用 JS 提取合并信息，调用 <code>worksheet.mergeCells()手动补上。- 遍历所有
<td> 和 <code><th>，收集含 <code>rowspan或colspan属性的元素及其坐标 - 注意
rowspan="1"或未声明该属性的单元格，不能参与 mergeCells 计算 - Excel 行列索引从 0 开始，但 SheetJS 的
mergeCells()参数是 1-based，别搞反 - 如果报表含冻结窗格，合并区域不能跨越冻结分界线，否则 Excel 打开报错
- 不要用
transform: scale()缩放整个<table>——会导致点击区域偏移、字体模糊 <li>如果业务强制要求“始终显示 table”，至少提供「横屏查看」按钮，用 <code>orientation: landscape媒体查询触发提示浮层
实际做复杂报表时，最难的不是写出能显示的 HTML，而是让 rowspan/colspan 动态对齐、导出不失真、小屏可操作、屏幕阅读器能理解——这些点串起来，才是真实落地的成本。
响应式报表表格在移动端根本没法靠 media query 挤缩
把 12 列财务报表强行压缩到手机屏幕，哪怕用了
font-size: 12px和white-space: nowrap，用户依然要左右拖拽，且点击目标太小。这不是样式问题，是表格模型本身不适合窄屏。真正可行的方案是：用 JS 检测视口宽度，在小屏下把每行
<tr> 转成垂直卡片列表，用 <code><dl></dl>或带data-label的<div> 替代 <code><table> 结构，保持语义清晰又可操作。 <ul><li>转换逻辑必须保留下原始 <code><th> 文本作为 <code>data-label值，否则辅助技术无法读取字段含义 - 遍历所有
