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