直接删除无语义、无数据、纯为撑样式的；识别方法：在Chrome DevTools Elements面板中Ctrl+F搜，逐个检查是否同时满足——无、无、内全为空或仅含/、父容器已设display: grid/flex。
直接删掉那些没语义、没数据、纯为撑样式的 ，别修——重构不是重写样式，是砍掉浏览器根本不需要的 DOM 节点。怎么一眼识别该删的冗余表格
打开 Chrome DevTools → Elements 面板 → Ctrl+F 搜 ，逐个点开看这三项是否同时成立：- 没有
、没有 里全是空 ，或只塞了 、
- 父容器已经声明了
display: grid 或 display: flex
满足就删。别信 border 属性、colgroup、或者“CMS 导出的 Word HTML 很规范”这种错觉。
嵌套超过两层的 必须替换像 这种结构，不是“写法问题”，是 DOM 层级失控。它会导致：
- 打印时子表飘到页首/页尾
-
querySelectorAll('table table table') 返回顺序不可靠
- 屏幕阅读器无法线性读取字段名
- 小屏下横向滚动不可避免
正确替代方案是用 CSS Grid 控制父容器布局，例如：
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem;">
<div>标签</div>
<div>输入框</div>
</div>
别再套 + 外层 。子表格必须严格嵌在 或 | 里 常见错误是把子表直接写在 下，比如：<tr>
<table class="nested">...</table>
<td>主表内容</td>
</tr>
浏览器会把它踢出 ，甚至塞进隐式 ，结果就是 DOM 错乱、JS 查不到、CSS 选不到。唯一合法写法是：<tr>
<td colspan="3">
<table class="nested">
<thead><tr>
<th>日期</th>
<th>金额</th>
</tr></thead>
<tbody><tr>
<td>2026-06-01</td>
<td>¥12,500</td>
</tr></tbody>
</table>
</td>
<!-- 其他列 -->
</tr>
注意：子表也得有 和 ，不能省；colspan 是预留空间的关键，不是可选项。边框和间距不统一？别怪子表，怪 border-collapse
主表设了 border-collapse: collapse（比如 Bootstrap 默认），子表会继承，导致边框发虚、双线、错位。解决方法只有两个：
- 给子表显式加
style="border-collapse: separate;"
- 避免用
width: 100%，改用 max-width: 100%; overflow-x: auto;，尤其当父表用了 table-layout: fixed
真正难处理的从来不是怎么让边框对齐，而是你忘了子表默认不继承父表的 layout 行为——它按自己内容撑开，不是按父单元格宽度拉伸。
| |
|
|
|
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
