表格单元格合并需严格对齐结构，rowspan要求下一行对应列留空，colspan仅影响当前行；必须设置table-layout:fixed并用<col>定义列宽；多表格布局应改用CSS Grid而非嵌套table。
用 colspan 和 rowspan 合并单元格时，结构必须对齐
合并不是“视觉挪动”，而是改变单元格的渲染占位。一旦某个 <td rowspan="2"> 出现，下一行对应列位置**必须留空**，否则浏览器会自动补 <td>，导致整行错位。
常见错误现象：表格某行突然多出一列、文字堆叠、边框断裂。
- 写法上，先处理
rowspan，再处理colspan；跨行合并优先级更高 - 检查 DOM：打开开发者工具，逐行展开
<tbody>，确认每行<td>数量是否恒定 - 不要在已设
rowspan的列中重复写<td>，哪怕内容为空也要跳过 -
colspan相对安全，但它只影响当前行，不会“撑开”后续行的列宽
固定列宽必须配 table-layout: fixed
不加这个声明，width 属性在 <col> 或 <td> 上基本无效——浏览器默认按内容自动撑开列宽，尤其在中文或长英文单词场景下完全失控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优先用
<col>定义列宽：<col style="width: 150px">，比在第一行<td>上设width更稳定 - 启用
table-layout: fixed后，所有列宽只认第一行（或<col>），后续行的width声明会被忽略 - 内容溢出必须手动控制：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;缺一不可 - IE9–11 对
<col>支持弱，兜底方案是给第一行每个<th>加内联width属性，如<th width="120">
8 个以上独立表格排布，别用嵌套 <table> 或 float
传统做法（比如把 8 个表格塞进一个大 <table>）会导致语义混乱、响应式失效、JS 操作困难。现代浏览器里，display: grid 是唯一合理选择。
关键点：
- 每个表格包一层
<div class="table-wrapper">，避免直接操作<table>节点 - 容器设
display: grid; grid-template-areas:，用grid-area精确分配位置，比如grid-area: t1; - 行列轨道推荐用
fr+ 固定值组合，例如grid-template-rows: 200px 1fr 150px; - 避免在
<table>上直接设width: 100%，应让 wrapper 控制尺寸，表格自身设width: 100%; height: 100%
需要动态调整或响应式，就该放弃原生 <table>
当出现这些情况时，<table> 不再是“够用”，而是“碍事”：
- 小屏下横向滚动卡顿（
<table>的overflow-x: auto在 iOS Safari 表现极差） - 要实现“课程横跨周三+周五”这类非连续列合并，
colspan会破坏整行结构 - 需配合 JS 实时拖拽排序、折叠/展开某行、高亮筛选结果
- 服务端返回的是扁平 JSON，而非二维矩阵，硬转
<tr><td>成本高且难维护
这时直接用 div + display: grid 或 display: flex 模拟表格行为更轻量。重点不是“像不像表格”，而是“能不能可靠承载数据与交互逻辑”。
