财务/预算报表必须用原生<table>，因其语义准确、屏幕阅读器可读、打印不分页、Excel导出保真；需显式用<thead>/<tbody>、正确scope属性、colspan/rowspan配平、table-layout: fixed优化性能。
不能用 <table> 做整页布局，但复杂报表本身就必须用 <table> —— 因为它的语义、可访问性、打印分页和 Excel 导出保真度，是 flex 或 grid 根本无法替代的。
为什么财务/预算报表必须用原生 <table>
报表不是 UI 布局问题，核心诉求是：屏幕阅读器能准确读出「第3行第2列对应‘营业成本’下的‘原材料’」，打印时不会把一行数据切到两页，导出 Excel 时 colspan="3" 能被 Office 识别为真实合并单元格。这些能力只存在于语义正确的 <table> 中。
-
<thead>和<tbody>必须显式包裹，哪怕只有一行表头——否则 DataTables、JAWS、Excel 导出库都可能降级或失效 - 所有表头必须用
<th>，且带scope="col"或scope="row"；<td>里塞<div>模拟表头，等于主动放弃可访问性 - 用
display: table的 CSS 布局方案，对报表无效：它不生成真正的HTMLTableElement，rows/cellsAPI 不可用，也无法被 SheetJS 正确解析
colspan 和 rowspan 不是“为了好看”，而是语义刚需
比如「净利润」纵向覆盖「营业利润」和「所得税费用」两行，或「2024年度」横向跨「营业收入」「营业成本」「毛利率」三列——这不是视觉设计选择，而是数据层级关系的强制表达。跳过它，导出 Excel 就会错行，屏幕阅读器会把「净利润」和「营业利润」当成无关项。
- 检查是否写错：用 DevTools 查看
document.querySelector('table').rows[i].cells.length，每行必须相等；不等说明colspan/rowspan没配平 - 禁止在
<thead>里用rowspan跨到<tbody>—— HTML 规范不支持，Safari 和旧版 Edge 会直接丢弃该单元格 - 嵌套三级表头（如「主营业务收入 → 产品A → 国内」）时，先画格子草图，标出每行逻辑列数，再反推哪些位置要合并；别靠试错硬调
大数据量下表格卡顿？问题不在 JS，而在渲染模式
超过 500 行就卡，90% 是因为没设 table-layout: fixed。浏览器默认按 auto 模式计算列宽，会等全部内容加载完才排版，长文本、UUID、JSON 片段会让整张表重排崩溃。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足三个条件：
<table>有明确width（如100%或1200px）；列宽定义在<col>上（不是<th>的style）；禁用min-width/max-width -
<col width="25%">安全，<col width="1fr">无效（<col>不支持 Grid 单位） - 内容溢出必须用组合：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;——table-layout: fixed不解决换行，只管列宽分配
固定表头滚动在 Safari 失效？别碰 <thead> 的 position: sticky
Safari 对 <thead> 的 sticky 支持极不稳定，缩放或高 DPI 屏下常错位。解决方案是绕开它：
- 把
<thead>移出<table>，抽成独立<div class="table-header">，与<table>并列 -
<table>外层容器设overflow-y: auto; height: 600px，.table-header设position: sticky; top: 0; z-index: 1 - 关键一步：用
getBoundingClientRect()同步滚动时的scrollLeft，否则横向滚动时表头列会和主体错位
最易被忽略的是数字对齐：后端传字符串 "1,234.56" 会导致 text-align: right 错位；推荐前端用 Intl.NumberFormat 格式化纯数字，并加 font-variant-numeric: tabular-nums 强制等宽数字。
