rowspan错位本质是占位未跳过：浏览器将rowspan="3"理解为当前列后续2行被占用，若后续行仍在此列写td就会新增一列导致右移；colspan同理，多写td会破坏列数一致；必须确保每行tr内子元素数量恒定，且th/td必须嵌套在tr内，配合table-layout:fixed和border-collapse:collapse保证布局稳定。
rowspan错位本质是“占位没跳过”
浏览器看到 rowspan="3"，不是“把这格拉高”，而是说：“从这一行起，第1列接下来2行都归我占了”。后续行如果还在同一列写 <td>，浏览器只能强行给它新开一列——于是表格突然多出一列，整行右移。你看到的“错位”，其实是列数膨胀后的视觉结果。
<p>常见错误现象：<code><tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr><td>C</td></tr> 渲染后第二行出现两个单元格（C + 空白），而不是预期的“A C”上下对齐。
- 必须删掉被占列对应位置的
<td>，不是留空，是彻底不写 <li>若 <code>rowspan="N，影响范围是当前行 + 后续N−1行 - 用开发者工具检查每行
<tr> 下的子元素数量，所有行必须列数一致（被 <code>rowspan占位的列不计入该行计数）colspan错位往往因“多写了一个
” colspan="2"意味着这个单元格吃掉本行2个列槽位，所以它右边那一个<td> 就不该存在。但很多人写了 <code><td colspan="2">标题</td> <td>周二</td>，结果这一行实际占了3列，而其他行只写3个<td>，导致对不上。 <p>使用场景：表头分组（如“课程安排”跨周一至周五）或合并操作列。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul><li>写了 <code>colspan="N"，这一行就要比基准行少写N−1个<td> <li>基准行指未用 <code>colspan的普通行；建议先写好基准行列数，再反推合并行该写几个<td> <li>调试时右键检查 <code><tr>，看子节点数量是否恒定——这是最直接的结构验证方式 <h3>tbody里直接塞th/td会触发隐式<tr>补全 <p>HTML规范要求 <code><th> 和 <code><td> 必须是 <code><tr> 的直接子元素。<code><tbody> 下直接放 <code><th colspan="7">2026年10月</th>是非法结构，浏览器会自动插入一个空<tr> 来兜底，造成“月份标题上方多出一行空白”或紧贴 <code><thead> 错位。 <p>典型错误代码：<code>tbody.appendChild(th)（没包tr）
DeepBI DHTML 页面生成器下载生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 永远用
document.createElement("tr")包一层，再把th或tdappend 进去 - 动态生成时，检查 DOM 结构：
tbody > tr > (th|td)必须严格成立 - 即使内容为空，
<tr><td></td></tr>也比漏掉<tr> 安全得多 <h3>table-layout: fixed 是稳定列宽的底线配置</h3> <p>不设 <code>table-layout: fixed，浏览器按内容自动算列宽，长文本、图片、未限制宽度的嵌套元素都会撑开列，导致相邻行列宽不一致，视觉上就是“错位”。这不是 bug，是默认算法的必然表现。性能影响：启用后列宽由第一行或
<col>决定，后续行内容溢出也不会改变布局，JS 读取clientWidth更稳定。- 必须配合
border-collapse: collapse使用，否则边框间隙会干扰宽度计算 - 给
<table> 设 <code>width: 100%，再用<col>或 CSSnth-child()控制各列比例 - 嵌套元素（如
<div>、<code><img alt="HTML怎么重构表格中错位的行列结构" >）要加max-width: 100%; height: auto，防止突破单元格边界 复杂表格重构最易忽略的点：**rowspan/colspan 不是样式属性，是结构契约**。写错一个<td>，整张表的网格坐标就偏移了，后续所有 JS 操作（如导出 Excel、提取数据）都会连锁出错。别依赖“看起来对”，要靠开发者工具逐行数 <code><td> 数量来验证。</td>
- 必须配合
- 永远用
