财务趋势表必须用 table 实现，因其唯一满足 excel 导出保真、屏幕阅读器正确解析、打印分页不撕裂三项硬要求；数值列需同时设置 text-align: right 和 font-variant-numeric: tabular-nums 以确保对齐与可访问性。
财务趋势表必须用 table，别用 CSS Grid 或 Flex
财务趋势数据（如“近三年营收、毛利、净利”）本质是二维结构化数据，带明确行列语义和跨维汇总需求。table 是唯一能同时满足 Excel 导出保真、屏幕阅读器正确解析、打印分页不撕裂这三项硬要求的方案。用 div + display: grid 做出来的“表格”，导出 Excel 时会丢失 colspan/rowspan 语义，负数括号会被当文本处理，千分位符号在德语/日语 locale 下错乱——这些都不是样式问题，是数据表达失效。
text-align: right 和 font-variant-numeric: tabular-nums 必须成对出现
数字列只设 text-align: right 不够：阿拉伯数字“1”比“0”窄，“7”比“8”窄，纯靠右对齐会导致视觉错位，尤其在小数点对齐场景下更明显。必须叠加 font-variant-numeric: tabular-nums 强制等宽数字渲染。
- 后端返回纯数字（如
1234567.89），前端用Intl.NumberFormat格式化，显式指定useGrouping: true和minimumFractionDigits: 2 - CSS 中统一给数值列加类：
.amount { text-align: right; font-variant-numeric: tabular-nums; } - 负数统一用括号包裹：
(123.45)，避免减号被读屏软件误读为“减法运算符” - 禁止后端返回已加逗号的字符串（如
"1,234,567.89"），否则text-align: right会因逗号宽度浮动而失效
colspan 和 rowspan 不是装饰，是语义刚需
趋势表里“2024年”横跨“营收、毛利、净利”三列，“累计同比”纵跨多行——这些合并不是为了视觉整齐，而是告诉 Excel 和读屏软件：“这一格代表下方三列的共同时间维度”。错用或漏用，导出后单元格位置全乱，辅助技术完全无法建立行列关联。
-
colspan="n"的值必须是整数且 ≥1，不能为 0 或小数；rowspan同理 - 同一行所有
td/th的colspan之和，必须等于该表逻辑列数（以第一行为准） - 避免在
thead里用rowspan跨到tbody，HTML 规范不支持，部分浏览器解析会丢弃 - 用开发者工具检查
table.rows[i].cells.length，确认每行单元格数量一致，否则 DOM 已损坏
表头固定滚动要绕开 <thead> 的 <code>position: sticky
Safari 对 <thead> 的 <code>position: sticky 支持极不稳定，缩放或高 DPI 屏下会错位甚至消失。正确做法是把表头抽出来，和主体 <table> 并列放置：
<ul>
<li>外层容器设 <code>overflow-y: auto 和固定高度
<thead> 移出 <code><table>，改为独立 <code><div class="table-header">
<li>该 <code>div 设 position: sticky; top: 0; z-index: 1
scrollLeft，赋值给表头容器）th 宽度与下方 td 严格一致，用 width 或 min-width 统一控制，否则错位真正难的不是写几行 CSS，而是动态生成时按行列顺序严格计算 colspan/rowspan 数值——JS 事后 patch 无效，DOM 结构一旦错，后续所有语义和导出都不可逆。
