table-layout:fixed 是财务报表提速的第一道闸，强制固定列宽避免浏览器反复测量；配合 documentfragment 批量插入、预格式化数字、拆分表头与内容并同步滚动，可显著减少重排。
table-layout:fixed 是财务报表提速的第一道闸
财务报表动辄上百列、数千行，table-layout: auto 会让浏览器反复测量每列内容宽度——哪怕一个单元格里有带换行的长文本或内联 span，整表都会卡住重排。强制设为 table-layout: fixed 后，浏览器只看 <col> 或第一行 <th>/<code><td> 的 width，后续所有行都不再参与列宽计算。
<p>实操建议：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/178995432594388.jpg" alt="Pptx To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="overflowclass">Pptx To Html</a>
<p class="overflowclass">使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>必须为每列显式声明 <code><col width="120">，不能靠 CSS width 或内联 style；width 属性值建议用像素，避免百分比触发回退到 auto 模式
<col> 节点，别等渲染完再 setAttributecolspan 和 rowspan ——它们会绕过 fixed 逻辑，让对应行重新触发布局计算tbody 批量插入 + documentFragment 避免连续重排
直接循环 appendChild 一行行加 <tr>，每加一次都可能触发一次 layout，1000 行就是 1000 次重排。财务报表数据通常一次性获取，没必要边拉边画。
<p>实操建议：</p>
<ul><li>用 <code>document.createDocumentFragment() 缓存所有 <tr>，最后只调一次 <code>tbody.appendChild(fragment)
await new Promise(r => setTimeout(r, 0)) 让出主线程，避免页面假死<td> 里再套 <code><div> 或 <code><span class="number-format"></span> ——财务数字格式化应提前在 JS 中完成，直接输出纯文本
冻结表头与横向滚动需绕开原生 table 限制
财务报表常需固定首行（表头）+ 横向滚动查看长列，但原生 <table> 无法单独滚动 <code>tbody，强行套 overflow-x: auto 会导致表头错位、列宽失准。
实操建议：
- 把
<thead> 和 <code><tbody> 拆成两个独立 <code><table>，用 JS 同步滚动位置和列宽（监听 <code>scrollLeft并赋值给另一个容器） - 更稳方案：放弃
<table>，改用 <code>display: grid模拟表格结构，配合position: sticky冻结表头，列宽由grid-template-columns控制，完全规避重排陷阱 - 若必须保留语义化
table，至少补全role="table"、role="row"等 ARIA 属性，否则屏幕阅读器会把拆分后的双表读成两个无关表格 - 服务端或 JS 数据预处理阶段就完成格式化，不要在模板里用
${num.toLocaleString()}实时计算 - 避免用
white-space: pre-wrap或word-break: break-all处理长字段——它们会让浏览器对每个字符做断行检查，开销远高于截断+tooltip - 所有金额单元格统一加
class="numeric"，CSS 用text-align: right+font-variant-numeric: tabular-nums对齐数字，不依赖空格或
财务数字渲染中容易被忽略的 DOM 细节
看起来只是显示“¥12,345,678.90”，但每个逗号、小数点、货币符号背后都是额外的文本节点和样式计算。尤其当单元格含条件高亮（如负数标红）、千分位动态切换时，问题放大。
实操建议：
