colspan值应填横跨列数而非起止列号，需确保每行总列数严格相等，配合设置列宽及scope/headers属性保障无障碍语义。
colspan 值怎么设才对
表头横跨几列，colspan 就填几，不是“从第几列到第几列”。比如表格共 5 列，想让第一个 <th> 占满前 3 列，就写 <code>colspan="3"；剩下两列用两个独立 <th> 补齐，不能漏，否则浏览器会自动补空格或错位。<p>常见错误是算错总列数，尤其当其他行用了 <code>colspan 或 rowspan 后，视觉列数 ≠ 实际列数。建议先画草图，标出每行每个单元格实际占的列位置，再反推 colspan 值。
多级表头里 colspan 容易塌掉
嵌套表头（比如第一行一个大标题 colspan="6"，第二行分六栏）时，必须保证每一行的列数总和严格相等。例如：
<tr><th colspan="6">销售数据汇总</th></tr><tr> <th>区域</th> <th>Q1</th> <th>Q2</th> <th>Q3</th> <th>Q4</th> <th>总计</th> </tr>
上面第二行共 6 个 <th>，和第一行 <code>colspan="6" 对齐。如果少写一个，浏览器可能把最后一列拉宽、或在渲染时错行——这种错位在 Chrome 和 Safari 中表现不一致，Firefox 更严格。
检查方法：用浏览器开发者工具选中 <tr>，看 computed 样式里的 <code>grid-column-end 是否连续无缺口。
colspan 和 CSS width 冲突怎么办
给带 colspan 的 <th> 直接设 <code>width（如 style="width: 300px;"），容易导致整列宽度被撑开，后面普通单元格变窄甚至换行。这不是 bug，是 HTML 表格布局算法决定的：浏览器先按 colspan 分配列槽，再按 width 调整槽宽，但所有同列单元格共享该列基准宽度。
稳妥做法是：
- 不直接设 <th> 的 <code>width，改用 <col> 标签定义列宽
- 或给父 <table> 加 <code>table-layout: fixed，再配合 <col>
- 若必须动态控制，优先用 min-width + white-space: nowrap 防止文字挤垮布局
无障碍和语义问题常被忽略
仅靠 colspan 横跨的表头，屏幕阅读器无法自动关联它和下方数据单元格的列关系。必须配合 scope 或 id/headers 显式声明。
推荐写法：
- 单层横跨表头：加 scope="colgroup"
- 多级结构：给顶层 <th id="sales">，下面每列 <code><td headers="sales">
<br>
- 不要用 <code>role="columnheader" 替代原生语义，部分读屏软件不识别
这个细节不影响页面显示，但影响残障用户能否正确理解表格结构——而且上线后被审计发现，改起来比调样式麻烦得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
