多级表头避免分割线断裂需确保所有行单元格总数对齐列数，显式声明colgroup列宽与边框，每行colspan总和严格等于总列数，配合border-collapse: collapse及所有单元格显式定义border-bottom和border-right。
多级表头怎么避免 colspan 错位导致的分割线断裂
HTML 表格里用 colspan 和 rowspan 拼多级标题时，只要某一行的单元格总数不等于 <colgroup> 定义的列数或首行 <tr> 的实际 <th> 数，浏览器就会自动补空单元格——这会导致 border 断开、线条错位。核心是「所有行必须对齐列总数」。
- 先用
<colgroup>显式声明每列宽度和边框，比如：<colgroup> <col style="border-right: 1px solid #ccc"> <col style="border-right: 1px solid #ccc"> <col> </colgroup>
- 每一行
<tr>的<th>或<td>合计colspan值必须严格等于总列数（例如 3 列，就不能出现colspan="4"或两格加起来只有 2） - 最顶层标题行建议全用
colspan，次级标题按实际归属拆分，不要为了“看起来对齐”而硬塞空<th>
用 CSS border-collapse 实现连续分割线的关键设置
border-collapse: collapse 是让表格线条连贯的前提，但仅设这个不够——它会让相邻边框合并，如果某格没设 border，就可能在合并时“吃掉”邻格的线。
- 必须给
<table>设border-collapse: collapse，且不能被后代样式覆盖 - 所有
<th>和<td>都要显式定义border-bottom和border-right（哪怕设为none），否则合并时会出现断点 - 如果需要“仅内部有线”，给
<thead>的最后一行加border-bottom: 2px solid #000，其他行用细线，视觉上就能区分层级
跨行标题（rowspan）与分割线对齐的常见陷阱
当某个标题要跨多行（比如左侧“部门”竖着写三行），rowspan 本身不会破坏横向分割线，但容易让人忽略：它占据的行数内，其他列必须留空，否则会挤乱结构。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 跨行单元格必须放在该组行的**第一行对应位置**，后续行中相同列不能再放任何单元格
- 若次级标题行有
rowspan，其下方行的同列必须是空的，或用 - 横向分割线靠的是
border-bottom，所以跨行格的border-bottom只在最后一行生效；如需每行都有底边，得给每一行单独设<tr>的border-bottom
响应式下多级表头分割线错位怎么办
用 display: block 或媒体查询隐藏列时，colspan 计算逻辑会被打乱，原本对齐的线会突然偏移或消失。
立即学习“前端免费学习笔记（深入）”；
- 避免在响应式中直接用
display: none隐藏<th>；改用visibility: hidden+width: 0+overflow: hidden保留布局占位 - 移动端可考虑用
@media重写整个<thead>结构，而不是动态修改colspan值 - 用
grid或flex模拟表头是可行替代方案，但注意：语义化会丢失，屏幕阅读器支持变弱
真正难的不是画几条线，而是让每一条线在各种缩放、字体变化、动态增删列的情况下都不断不跳——这意味着所有 colspan/rowspan 必须可推导，所有 border 必须显式声明，所有列宽必须可控。漏掉任意一环，线就断了。
