HTML表格中td不能真正拆分，只能通过colspan和rowspan合并单元格后重写结构实现；强行用JS操作内容或CSS布局会导致DOM错乱、样式失效及兼容性问题。
HTML 表格里 td 不能“拆分”，只能用 colspan 和 rowspan 模拟
HTML 的 td 或 th 元素本身不支持“一分为二”这种动态拆分操作。所谓“拆分单元格”，实际是通过合并相邻单元格来腾出空间，再插入新的单元格——本质是重写结构，不是切割已有元素。
常见错误现象：Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'（强行用 JS 拆分 td 内容导致 DOM 错乱），或视觉上错位、边框断裂、响应式失效。
-
colspan="2"让一个单元格横跨两列，为右侧“空出位置”后插入新td -
rowspan="2"同理用于纵向，但需确保下一行对应列留空（否则表格结构崩塌） - 修改
colspan/rowspan后，必须同步调整整行/整列的td数量，否则浏览器会自动补td导致样式错乱
用原生 HTML 重写结构实现“拆分”效果
比如原表有一列 <td>A</td>，你想变成左右两个单元格 A1 和 A2，就得把原来那行改成两个 td，并检查上下行是否需要调整 rowspan 值。
使用场景：后台导出的静态报表需要微调列数；邮件模板中兼容性要求高的表格布局。
立即学习“前端免费学习笔记（深入）”；
性能影响几乎为零，但手动改结构容易漏掉关联单元格——特别是带 rowspan 的表头，改错一处，整列偏移。
<!-- 拆分前：单个单元格 --> <tr> <td>原始内容</td> </tr> <p><!-- 拆分后：两个独立单元格 --> <tr> <td>左半部分</td> <td>右半部分</td> </tr>
JS 动态“拆分”时必须删旧建新，不能直接操作文本节点
有人试图用 td.innerHTML = '<span>左</span><span>右</span>' 来模拟拆分，这只会让内容显示在同一个单元格内，无法参与表格列计算，也无法单独设置边框/背景/对齐方式。
真正可行的做法是：定位到目标 td，获取其父 tr，移除它，再插入两个新的 td 节点。
- 先用
cellIndex记录原td在行中的位置，避免插入错列 - 若该
td有colspan或rowspan，要按比例分配给新单元格（例如原colspan="4"，拆成两个就各设colspan="2"） - 注意事件监听器不会自动绑定到新
td，需手动重新挂载
CSS 无法替代 colspan/rowspan 实现真正的单元格拆分
用 display: grid 或 float 在 td 内部布局，看起来像“分成了两块”，但表格语义和可访问性（如屏幕阅读器）仍认为它是一个单元格。导出 Excel、打印预览、响应式断点都可能出问题。
兼容性影响明显：IE 严格模式下，td 内嵌 display: grid 可能被忽略；某些邮件客户端直接丢弃整个 td 样式。
真正需要“逻辑拆分”的地方（比如数据粒度变化、导出字段增加），别省事——老老实实改 HTML 结构，比后期 patch 强十倍。
最容易被忽略的是：表格有 thead / tbody 分组时，“拆分”操作必须跨组同步处理，否则 tbody 里的列数和 thead 对不上，Chrome 会静默修正、Firefox 可能报 table row structure error。
