空表格结构必须复用真实标签及语义，骨架行需保留colspan、禁用display:none，空提示须嵌入并设aria-live="polite"，遮罩层应绝对定位在父容器内。
空表格结构必须复用真实 <table> 的语义与盒模型
<p><a style="color:#f60; text-decoration:underline;" title="异步加载" href="https://m.php.cn/zt/34044.html" target="_blank">异步加载</a>表格数据时，直接塞一个 <code><div class="loading"> 或 <code><p>加载中...</p> 进去，是错的。它脱离了表格的语义上下文，会导致：屏幕阅读器跳过、键盘焦点丢失、CSS flex/grid 布局错位、SSR 与客户端渲染不一致。
正确做法是：空状态占位符必须是 <table> 标签本身，且保留所有关键属性（<code>class、aria-label、role 等），仅清空 <tbody> 内容或替换为骨架行。<ul><li>如果真实表格是 <code><table class="order-table" aria-label="订单列表">，空状态就该是同一标签，内部放 3 行 <code><tr><td colspan="5"><div class="skeleton-line short"></div></td></tr>
<div> 包裹整个表格再加 loading 遮罩——遮罩会干扰表格内文字渲染，且无法响应 <code>border-collapse 等表格专属样式<tbody> 的完整 <code><table>；否则由 JS 动态插入骨架行，用 <code>document.importNode() 或 content.cloneNode(true)，别用 innerHTML
colspan 骨架行必须匹配真实列数，且禁用 display: none
骨架行不是装饰，它是可访问性链路的一部分。如果真实表格有 5 列，骨架行里 <td colspan="5"> 就不能写成 <code>colspan="4" 或漏掉 colspan。
- 每个骨架
<td> 必须显式声明 <code>colspan，否则会被当单列处理，导致宽度崩塌、边框错位 - 不要给骨架行加
style="display: none"或hidden属性——读屏器会彻底忽略它，aria-live失效 - 骨架行建议用
<tr class="skeleton-row">，配合 CSS 控制高度和动画，而非靠 JS 切换显隐<h3>表格加载遮罩层必须用 <code>position: absolute覆盖，不能动<table> 自身 <p>想加“扫光”动画？别给 <code><table> 加 <code>background或animation，那会干扰单元格内文字排版和边框渲染。- 正确方式：在表格父容器里插入一个同尺寸遮罩层，例如：
<div class="table-wrapper"> <table class="data-table">...</table> <div class="table-loading"></div> </div>
- 遮罩层 CSS 必须含：
position: absolute; top: 0; left: 0; width: 100%; height: 100%，且background-size: 200% 100%（不是100% 100%），否则扫光不平滑 - 遮罩层不能设
pointer-events: none——否则用户无法点击表格内的筛选按钮或分页控件
空数据提示必须嵌在
<tbody> 里，且带 <code>aria-live="polite"“暂无数据”不能放在表格外面，也不能只用
<p></p>单独挂载。它得是<tbody> 的唯一子节点，并继承表格容器的可访问性属性。<ul> <li>正确结构：<pre class="brush:php;toolbar:false;"><tbody aria-live="polite" role="status"><tr> <td colspan="5" class="empty-cell"> <strong>暂无订单</strong> <p>当前暂无符合条件的订单记录</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr&#8203;&#8203;oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr&#8203;&#8203;oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button type="button">刷新列表</button> </td> </tr></tbody></pre> </li> <li> <code>aria-live="polite"必须加在<tbody> 上，不是 <code><td> 或 <code><p></p>；role="status"保证读屏器播报时不打断当前语音流 - 正确方式：在表格父容器里插入一个同尺寸遮罩层，例如：
- 文案必须含三要素：加
<strong></strong>的状态说明（≤8 字）、普通<p></p>的原因提示、原生<button></button>操作入口；纯文字“暂无数据”等于没写
表格异步占位的核心不是“怎么看起来像在加载”，而是“怎么让 DOM 结构、语义、可访问性全程一致”。骨架行、遮罩层、空提示，三者都得锚定在真实表格的盒模型和 ARIA 上下文里，否则任何 JS 切换都会引发抖动或读屏器失焦。
