识别Word导出HTML中纯占位表格需查三点：单元格仅含空格或无内容且computed样式height/padding/border为0；整表无caption/thead/tbody及data-*属性，父容器却用display:grid；table存在但colgroup/caption为空或仅width="0"，且嵌套超三层。
怎么识别 Word 导出的表格里哪些是纯占位标签
Word 转 HTML 生成的
<table>、<code><tr>、<code><td> 很多根本不承载数据，只是编辑器为了“撑住格式”硬塞的。典型表现包括：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><ul><li><code><td> 里只有 <code> 、<code><br> 或空字符串，且 computed 样式中 <code>height、<code>padding、<code>border 全为 0</li><li>整张表没 <code><thead>、没 <code><caption>、也没任何 <code>data-* 属性，父容器却已用 <code>display: grid 布局</li><li><code><colgroup> 存在但 <code><col> 全为空属性，或只带 <code>width="0" 这类无效值</li><li>嵌套三层以上：<code><table><tr><td><table><tr><td>…</td></tr></table></td></tr></table></li></ul><p>这些不是“样式没写好”，而是结构上就不该存在。</p><H3>删 <code><table> 前必须验证的三件事</H3><p>直接删可能让 JS 绑定失效或 CSS 选择器断链。动手前在 DevTools 里确认：</p><ul><li>右键目标 <code><table> → “Break on > subtree modifications”，操作页面看是否触发——不触发说明没被 JS 动态操作</li><li>全局搜索该 <code>class 或 <code>id（比如 <code>.MsoNormalTable），检查是否出现在 CSS 后代选择器（如 <code>.content table tr td）或 <code>document.querySelector 中</li><li>检查是否被 ARIA 属性引用：搜 <code>aria-owns、<code>aria-labelledby 等，确认它是否参与可访问性树</li></ul><H3>用正则批量清理 Word 表格冗余属性的实操写法</H3><p>VSCode 里打开 HTML 文件，Ctrl+H 启用正则模式，按顺序执行（每次点“预览”确认）：</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>border、<code>cellpadding、<code>cellspacing：<code>(border|cellpadding|cellspacing)="[^"]*?"</li><li>删无意义的 <code>width、<code>height（非 <code><img alt="HTML怎么重构表格清除冗余的占位标签" > 上）：<code>(width|height)=(?!(?:\s*["']?auto|100%|fit-content))[^>\s]*</li><li>删 <code><o:p>、<code><span style="max-width:90%"> 这类 Office 私有标签：<code><(o:p|span)[^>]*style="[^"]*mso-[^"]*"[^>]*> 和 (o:p|span)>
<td> 和仅含 <code> 的单元格（保留内容）：<code><td>]*>\s*(?: |\s*)\s*</td>注意：别用 .*? 跨行匹配，先用 <code>[\s\S] 替代，避免误吞整个表格结构。
为什么不能直接把 <table> 换成 <code><div> 就完事<p>语义和渲染行为完全不同：<code><table> 有隐式 <code>border-collapse、<code>table-layout: auto 等默认规则，而 <code><div> 没有。更安全的做法是：<ul>
<li>纯展示型表格（如价格对比、参数列表）→ 改用 <code><dl> + <code><dt>/<code><dd>，再配 <code>display: grid
<div style="display: grid; grid-template-columns: repeat(3, 1fr)">，删掉所有 <code><table> 包裹层<li>真要保留表格语义（如财务数据、可排序列表）→ 只清理属性和空行，不删 <code><table>，改用 <code>role="table" 显式声明最容易被忽略的是：删完后，display: contents 在旧版 Safari 里不支持，若需兼容 iOS 14 以下，得 fallback 到 visibility: collapse 或 JavaScript 动态移除节点。
