正确做法是用外层容器包裹表格并绝对定位加载层，避免直接向内插入非表格元素；动画须基于transform: rotate()并设will-change，通过class控制显隐，兼顾pointer-events和resize适配。

表格加载时如何不破坏原有结构

直接在 <table> 里塞 <code><div class="loading"> 会导致布局错乱——浏览器会把非表格元素（如 <code><div>）强制包裹进 <code><tbody>，甚至拆散 <code><tr><td> 结构。正确做法是用一个容器包裹整个表格，再把 loading 层绝对定位盖上去。 <ul><li>外层用 <code><div class="table-container"> 包住 <code><table><li>loading 元素放在这层容器内部、紧贴 <code><table> 后面，或作为伪元素（<code>::after）添加

设置 position: relative 在容器上，loading 元素设 position: absolute; top: 0; left: 0; width: 100%; height: 100%

确保 loading 元素的 z-index 高于表格，但不要盲目设成 9999——和现有弹层、下拉菜单冲突时反而遮不住

用 CSS 实现轻量级旋转动画不依赖 JS

多数场景不需要 JS 控制动画启停，纯 CSS 更稳定。关键不是“怎么转”，而是“怎么让转起来时不抖动、不重绘表格”。

• 动画必须基于 transform: rotate()，避免触发 layout；禁用 left/top 位移类动画
• 加 will-change: transform 提前告诉浏览器要动，减少卡顿（尤其在低端设备上）
• 使用 @keyframes 定义循环，别用 animation: spin 1s linear infinite 这种默认值——省略 infinite 会导致动画播完就消失，loading 看不到
• 示例关键帧：

  @keyframes spin { to { transform: rotate(360deg); } }

如何控制 loading 显示/隐藏时机

loading 不是“一上来就转”，而是数据未就绪时显示、渲染完成时隐藏。容易出错的是 DOM 插入和状态同步时机。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• 不要等 fetch().then() 才开始显示 loading——网络请求发出去前就要设 isLoading = true 并更新 UI
• 隐藏时机不能只靠 then：如果表格内容为空数组，也要清空表格并隐藏 loading，否则留个空转圈很诡异
• 用 class 切换控制显隐比直接操作 display 更安全：table-container.loading → CSS 中写 .table-container.loading::after { opacity: 1; pointer-events: auto; }
• 注意 SSR 场景：服务端渲染时，loading 不该出现，需通过 document.currentScript 或初始 state 判断是否客户端首次渲染

兼容性与性能避坑点

IE11 已淘汰，但部分企业内网仍跑着它；另外 table 的 border-collapse 和 fixed layout 会让绝对定位的 loading 偏移。

• IE11 不支持 transform: rotate() 在 pseudo-element 上生效，得 fallback 到 <img src="spinner.gif">
• 如果表格用了 table-layout: fixed，且设置了 width，loading 层需额外加 box-sizing: border-box，否则 padding 会让宽度超限
• 动画帧率低于 30fps 时人眼明显察觉卡顿，建议限制 animation-duration ≤ 0.8s，避免在低配安卓 WebView 里变成幻灯片
• 别给 loading 元素加 font-size 或 line-height——它只是视觉占位，这些属性可能意外影响表格行高计算

实际最常被忽略的，是 loading 层的 pointer-events 默认为 auto，用户会误点到下面的表格行；还有就是没处理窗口 resize 时 loading 层尺寸没重算，导致覆盖不全。这两个问题不报错，但线上一放大屏幕就露馅。