财务/预算报表必须用原生，因其语义准确、屏幕阅读器可读、打印不分页、excel导出保真；需显式用/、正确scope属性、colspan/rowspan配平、table-layout: fixed优化性能。

不能用 <table> 做整页布局，但复杂报表本身就必须用 <code><table> —— 因为它的语义、可访问性、打印分页和 Excel 导出保真度，是 <code>flex 或 grid 根本无法替代的。

为什么财务/预算报表必须用原生 <table><p>报表不是 UI 布局问题，核心诉求是：屏幕阅读器能准确读出「第3行第2列对应‘营业成本’下的‘原材料’」，打印时不会把一行数据切到两页，导出 Excel 时 <code>colspan="3" 能被 Office 识别为真实合并单元格。这些能力只存在于语义正确的 <table> 中。 <ul><li><code><thead> 和 <code><tbody> 必须显式包裹，哪怕只有一行表头——否则 DataTables、JAWS、Excel 导出库都可能降级或失效 <li>所有表头必须用 <code><th>，且带 <code>scope="col" 或 scope="row"；<td> 里塞 <code><div> 模拟表头，等于主动放弃可访问性 <li>用 <code>display: table 的 CSS 布局方案，对报表无效：它不生成真正的 HTMLTableElement，rows/cells API 不可用，也无法被 SheetJS 正确解析

colspan 和 rowspan 不是“为了好看”，而是语义刚需

比如「净利润」纵向覆盖「营业利润」和「所得税费用」两行，或「2024年度」横向跨「营业收入」「营业成本」「毛利率」三列——这不是视觉设计选择，而是数据层级关系的强制表达。跳过它，导出 Excel 就会错行，屏幕阅读器会把「净利润」和「营业利润」当成无关项。

• 检查是否写错：用 DevTools 查看 document.querySelector('table').rows[i].cells.length，每行必须相等；不等说明 colspan/rowspan 没配平
• 禁止在 <thead> 里用 <code>rowspan 跨到 <tbody> —— HTML 规范不支持，Safari 和旧版 Edge 会直接丢弃该单元格 <li>嵌套三级表头（如「主营业务收入 → 产品A → 国内」）时，先画格子草图，标出每行逻辑列数，再反推哪些位置要合并；别靠试错硬调</li> <h3>大数据量下表格卡顿？问题不在 JS，而在渲染模式</h3> <p>超过 500 行就卡，90% 是因为没设 <code>table-layout: fixed。浏览器默认按 auto 模式计算列宽，会等全部内容加载完才排版，长文本、UUID、JSON 片段会让整张表重排崩溃。
  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载
  • 必须同时满足三个条件：<table> 有明确 <code>width（如 100% 或 1200px）；列宽定义在 <col> 上（不是 <th> 的 <code>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> 的 <code>position: sticky

  Safari 对 <thead> 的 <code>sticky 支持极不稳定，缩放或高 DPI 屏下常错位。解决方案是绕开它：

  • 把 <thead> 移出 <code><table>，抽成独立 <code><div class="table-header">，与 <code><table> 并列 <li><code><table> 外层容器设 <code>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 强制等宽数字。