table-layout:fixed 是财务报表提速的第一道闸，强制固定列宽避免浏览器反复测量；配合 documentFragment 批量插入、预格式化数字、拆分表头与内容并同步滚动，可显著减少重排。
table-layout:fixed 是财务报表提速的第一道闸
财务报表动辄上百列、数千行，table-layout: auto 会让浏览器反复测量每列内容宽度——哪怕一个单元格里有带换行的长文本或内联 span，整表都会卡住重排。强制设为 table-layout: fixed 后，浏览器只看 <col> 或第一行 <th>/<code><td> 的 width，后续所有行都不再参与列宽计算。
<p>实操建议：</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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5030" title="Html To Pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/179031962213835.jpg" alt="Html To Pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5030" title="Html To Pdf">Html To Pdf</a>
<p>使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。</p>
</div>
<a href="/xiazai/skill5030" title="Html To Pdf" 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>
<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>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”，但每个逗号、小数点、货币符号背后都是额外的文本节点和样式计算。尤其当单元格含条件高亮（如负数标红）、千分位动态切换时，问题放大。
实操建议：
立即学习“前端免费学习笔记（深入）”；
