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 重写结构实现“拆分”效果
比如原表有一列 A A1 和 A2，就得把原来那行改成两个 td，并检查上下行是否需要调整 rowspan 值。
使用场景：后台导出的静态报表需要微调列数；邮件模板中兼容性要求高的表格布局。
立即学习“前端免费学习笔记（深入）”；
性能影响几乎为零，但手动改结构容易漏掉关联单元格——特别是带 rowspan 的表头，改错一处，整列偏移。
原始内容
左半部分 右半部分
JS 动态“拆分”时必须删旧建新，不能直接操作文本节点
有人试图用 td.innerHTML = '左右' 来模拟拆分，这只会让内容显示在同一个单元格内，无法参与表格列计算，也无法单独设置边框/背景/对齐方式。
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
真正可行的做法是：定位到目标 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。
