rowspan必须写在要跨行的那个<td>标签内；它只对所在单元格生效并向下跨N行，被跨行列必须彻底省略对应<td>标签，否则会导致表格错位。
rowspan属性写在哪个里才生效
它必须写在要“跨行”的那个 <td> 标签上，而且只写一次——不是每行都写，更不是写在被跨越的后续 <td> 里。浏览器靠这个值知道“从当前行开始，往下占几行”，后续行里对应位置的 <td> 就得主动留空或删掉，否则会错位。
常见错误是：把 rowspan="2" 写在第一行的 <td>，又在第二行同一列再写一个 <td>，结果表格多出一列、对不齐、边框重叠。
- 正确做法：第一行写
<td rowspan="2">姓名</td>，第二行**跳过这一列**，直接写下一列的 <td>
- 如果跨 3 行，就写
rowspan="3"，后面两行都不要在这个位置放 <td>
-
rowspan 值必须是正整数，rowspan="0" 或负数会被忽略
和colspan混用时怎么排单元格
当某单元格既要跨行又要跨列，rowspan 和 colspan 可以同时写在一个 <td> 上，但必须注意：它们共同占据的区域，其他所有 <td> 都不能再覆盖——否则渲染行为未定义，不同浏览器可能显示不同。
典型翻车场景：表头合并时，<th rowspan="2" colspan="2">成绩</th> 占了前两行前两列，那么第二行的前两个 <td> 就必须完全去掉，否则表格结构就乱了。
立即学习“前端免费学习笔记（深入）”；
Html To Pdf
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
下载
- 先确定最大行数和列数，画个草图标出哪些位置被合并、哪些必须留空
- 按 HTML 源码顺序逐行写
<tr>，每一行的 <td> 数量 = 总列数 − 该行被前面 rowspan 占用的列数
- Chrome DevTools 的 Elements 面板里看渲染后的
<table> 结构，比肉眼数更可靠
rowspan影响CSS样式和JavaScript操作吗
不影响 DOM 结构本身：rowspan 只是告诉浏览器“视觉上合并”，每个 <td> 还是独立节点，只是渲染时被拉伸了。但 JS 拿 document.querySelectorAll('tr td') 仍会选中所有 <td>，包括那些被跨行覆盖位置“本该有但没写”的单元格——它们根本不存在。
- CSS 的
:nth-child() 是按源码顺序数的，不是按视觉列数；比如某行只有 3 个 <td>，但第一个有 rowspan="2"，那第二行的 :nth-child(1) 就是第二个 <td>，不是“第一列”
- 用
cellIndex 属性获取列号时，它返回的是该 <td> 在其所在 <tr> 中的索引，不是全局列号
- 用
rows[i].cells[j] 访问时，j 超出当前行实际 <td> 数会返回 undefined，不是跳到下一行
响应式表格里rowspan还靠谱吗
在窄屏下把表格转成卡片式布局（比如用 display: block + data-label）时，rowspan 完全失效——因为语义结构被破坏了。视觉合并没了，数据关联也断了。
这不是 bug，是预期行为。如果你需要在移动端保持“姓名”和“科目成绩”之间的归属关系，不能只靠 rowspan，得靠额外标记，比如：
<td data-row-id="user-123">张三</td>
<td data-row-id="user-123">数学</td>
或者改用 <dl> / <section> 重构数据结构，而不是硬撑表格。
真正麻烦的是可访问性：屏幕阅读器会读出 rowspan 值，但用户未必理解“跨 2 行”意味着什么，尤其当内容动态加载、跨行数变化时，容易造成认知断层。
它必须写在要“跨行”的那个 <td> 标签上，而且只写一次——不是每行都写，更不是写在被跨越的后续 <td> 里。浏览器靠这个值知道“从当前行开始，往下占几行”，后续行里对应位置的 <td> 就得主动留空或删掉，否则会错位。
常见错误是：把 rowspan="2" 写在第一行的 <td>，又在第二行同一列再写一个 <td>，结果表格多出一列、对不齐、边框重叠。
- 正确做法：第一行写
<td rowspan="2">姓名</td>，第二行**跳过这一列**，直接写下一列的<td> - 如果跨 3 行，就写
rowspan="3"，后面两行都不要在这个位置放<td> -
rowspan值必须是正整数，rowspan="0"或负数会被忽略
和colspan混用时怎么排单元格
当某单元格既要跨行又要跨列，rowspan 和 colspan 可以同时写在一个 <td> 上，但必须注意：它们共同占据的区域，其他所有 <td> 都不能再覆盖——否则渲染行为未定义，不同浏览器可能显示不同。
典型翻车场景：表头合并时，<th rowspan="2" colspan="2">成绩</th> 占了前两行前两列，那么第二行的前两个 <td> 就必须完全去掉，否则表格结构就乱了。
立即学习“前端免费学习笔记（深入）”；
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 先确定最大行数和列数，画个草图标出哪些位置被合并、哪些必须留空
- 按 HTML 源码顺序逐行写
<tr>，每一行的<td>数量 = 总列数 − 该行被前面rowspan占用的列数 - Chrome DevTools 的 Elements 面板里看渲染后的
<table>结构，比肉眼数更可靠
rowspan影响CSS样式和JavaScript操作吗
不影响 DOM 结构本身：rowspan 只是告诉浏览器“视觉上合并”，每个 <td> 还是独立节点，只是渲染时被拉伸了。但 JS 拿 document.querySelectorAll('tr td') 仍会选中所有 <td>，包括那些被跨行覆盖位置“本该有但没写”的单元格——它们根本不存在。
- CSS 的
:nth-child()是按源码顺序数的，不是按视觉列数；比如某行只有 3 个<td>，但第一个有rowspan="2"，那第二行的:nth-child(1)就是第二个<td>，不是“第一列” - 用
cellIndex属性获取列号时，它返回的是该<td>在其所在<tr>中的索引，不是全局列号 - 用
rows[i].cells[j]访问时，j超出当前行实际<td>数会返回undefined，不是跳到下一行
响应式表格里rowspan还靠谱吗
在窄屏下把表格转成卡片式布局（比如用 display: block + data-label）时，rowspan 完全失效——因为语义结构被破坏了。视觉合并没了，数据关联也断了。
这不是 bug，是预期行为。如果你需要在移动端保持“姓名”和“科目成绩”之间的归属关系，不能只靠 rowspan，得靠额外标记，比如：
<td data-row-id="user-123">张三</td> <td data-row-id="user-123">数学</td>
或者改用 <dl> / <section> 重构数据结构，而不是硬撑表格。
真正麻烦的是可访问性：屏幕阅读器会读出 rowspan 值，但用户未必理解“跨 2 行”意味着什么，尤其当内容动态加载、跨行数变化时，容易造成认知断层。
