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