直接用原生 table 做骨架屏会卡顿或错位，因其渲染依赖完整 DOM 结构和 CSS 表格模型，仅塞空 tr/td 仍触发列宽计算、单元格合并等重排；数据加载前后列宽塌缩与撑开导致视觉跳动。
为什么直接用 table 做骨架屏会卡顿或错位
因为原生 table 的渲染依赖完整 DOM 结构和 CSS 表格模型，骨架屏若只塞空 tr/td，浏览器仍会尝试计算列宽、合并单元格、对齐方式等，导致重排（reflow）频繁。更常见的是：数据未加载时列宽塌缩，加载后突然撑开，造成视觉跳动。
实操建议：
- 放弃用真实
table标签写骨架，改用div模拟表格结构（display: table系列属性） - 固定列宽：为每列容器设
min-width或width，避免宽度随内容动态变化 - 禁用骨架状态下的文本换行：
white-space: nowrap+overflow: hidden防止高度突变 - 骨架行高必须与真实表格一致，推荐用
line-height控制，而非height
display: table 模拟表格骨架的最小可运行结构
这是最轻量、兼容性好（IE8+）、且不破坏语义流的做法。关键不是“像表格”，而是“表现得像表格”。
示例骨架单元格（带 loading 动画）：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<div class="skeleton-table">
<div class="skeleton-row">
<div class="skeleton-cell" style="width: 120px;"></div>
<div class="skeleton-cell" style="width: 80px;"></div>
<div class="skeleton-cell" style="width: 200px;"></div>
</div>
<div class="skeleton-row">
<div class="skeleton-cell" style="width: 120px;"></div>
<div class="skeleton-cell" style="width: 80px;"></div>
<div class="skeleton-cell" style="width: 200px;"></div>
</div>
</div>
CSS 必须包含：
.skeleton-table { display: table; width: 100%; }.skeleton-row { display: table-row; }.skeleton-cell { display: table-cell; vertical-align: middle; background: #f5f5f5; animation: pulse 1.5s infinite; }- 动画用
@keyframes pulse { 0% { opacity: 0.3; } 50% { opacity: 0.6; } 100% { opacity: 0.3; } }
Vue/React 中如何同步骨架与真实表格列宽
真实表格列宽常由内容撑开或 colgroup 定义，骨架若写死宽度，数据一来就错位。核心是复用同一套列宽配置。
实操建议：
- 把列定义抽成数组，例如：
const columns = [{ key: 'name', width: '150px' }, { key: 'status', width: '100px' }] - 骨架层和真实表格都用这个数组生成结构，确保
width属性完全一致 - 避免在真实表格中用
td { width: auto }—— 这会让浏览器重新计算，覆盖骨架设定 - 如需响应式列宽（如百分比），骨架层也必须用相同百分比，并配合
table-layout: fixed防止重排
移动端表格骨架容易被忽略的两个坑
一是横向滚动区域未预留空间，二是小屏下单元格高度压缩导致骨架“挤成一条线”。
- 给骨架容器加
overflow-x: auto，但必须同时设min-width: fit-content（或具体像素值），否则 iOS Safari 会忽略滚动 - 骨架单元格的
height不要设死，改用min-height: 40px+line-height: 40px，适应字体缩放 - 避免在骨架上用
font-size: 0清除间隙 —— 它会导致后续真实内容文字渲染异常（尤其 Android WebView） - 真机测试时重点看：快速切换网络（4G → offline）时骨架是否残留、是否闪白屏
