colspan和rowspan必须为≥1的纯正整数，否则浏览器忽略；结构错乱源于行单元格总数不匹配表头列数导致DOM层级断裂，应先确保HTML结构正确再用CSS或ARIA补充。
colspan 和 rowspan 怎么写才不被浏览器忽略
浏览器会直接忽略 colspan 或 rowspan 的值为 0、负数、非数字字符串（比如 "2px"）的情况，也会在 <thead> 里对 <code><th> 滥用 <code>rowspan 导致表头错位。本质是 HTML 解析器只认整数且必须 ≥1。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
colspan和rowspan的值必须是纯正整数，例如colspan="3"，不能写成colspan="3.0"或colspan="three" - 如果要“视觉上合并”，但语义上不该合并（比如筛选列），别硬套
colspan，改用 CSSborder-collapse: collapse+ 隐藏边框更稳妥 <thead> 中的 <code><th> 使用 <code>rowspan时，必须确保它下方对应行数的<tbody> 行数匹配，否则表格结构会塌陷或被重排 <h3>合并单元格后表格结构错乱，常见原因是什么</h3> <p>错乱不是渲染问题，而是 DOM 树层级断裂——浏览器按 HTML 规范校验表格结构，一旦发现某行单元格总数 ≠ 表头定义的列数，就会自动插入或闭合标签，导致你写的 <code>colspan被“吞掉”或错位到下一行。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的
Elements面板看最终生成的 DOM，而不是源码；经常能看到浏览器悄悄加了<tr> 或补了 <code><td> <li>检查是否混用了 <code><th> 和 <code><td> 在同一行，尤其在有 <code>rowspan的场景下，<th> 默认有 <code>scope语义，某些旧版 IE 会因此拒绝合并 - 避免在
<caption></caption>后直接写<tr>；必须用 <code><thead>/<code><tbody> 显式包裹，否则 <code>colspan容易失效用 CSS 实现“伪合并”比 HTML 属性更灵活吗
是，但仅限视觉层面。CSS 无法改变表格的语义结构和屏幕阅读器读取顺序，所以可访问性要求高的场景（如政府/金融表格）不能只靠 CSS。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想隐藏某列的边框实现“连体效果”，用
border-right: none配合border-collapse: collapse，比硬写colspan更容易动态控制 - 需要响应式合并（比如小屏下把两列内容挤进一列），CSS 的
display: block+flex布局比改 HTML 更可控，但此时已脱离<table> 语义 <li>若用 <code>position: absolute把单元格盖上去“模拟合并”，会导致打印样式错乱、复制粘贴内容错序，慎用 - 给含
colspan="3"的<th> 加 <code>aria-label="销售额、成本、利润汇总"是加分项，但前提是该<th> 确实横跨了三列且结构正确 <li> <code>role="presentation"适合彻底去掉某单元格的表格语义（比如装饰性空格），但它会让该单元格从表格导航中消失——不能用来“掩盖”错误的合并逻辑 - 最可靠的方式仍是：先用
colspan/rowspan写对结构，再用 ARIA 做补充说明，而不是反过来
aria-label 和 role="presentation" 能补合并后的可访问性缺口吗
能补一部分，但不能替代正确的
colspan/rowspan语义。屏幕阅读器依赖原生表格结构推导行列关系，如果 HTML 结构本身断裂，加 ARIA 只会让辅助技术更困惑。实操建议：
立即学习“前端免费学习笔记（深入）”；
合并单元格真正难的不是语法，是保持 HTML 表格模型的完整性。只要 DOM 树里某一行的单元格总数对不上，所有样式和 ARIA 都只是在擦玻璃上的雾气。
- 想隐藏某列的边框实现“连体效果”，用
- 用浏览器开发者工具的
