用 display: grid 控制报表区域划分，避免 float 或 inline-block；通过 grid-template-areas 命名区域、grid-column: span 跨列、position: sticky 冻结表头、minmax() + auto-fit 实现响应式列宽，并统一 box-sizing 与 border-collapse 防对齐错位。
用 display: grid 控制报表区域划分，别碰 float 或 inline-block
复杂表头 + 多列数据对齐，本质是二维空间约束问题。CSS Grid 天然支持行列定义，能精准控制表头跨列、冻结列、固定高度区等需求；而 float 和 inline-block 在多行错位、基线对齐、宽度计算上极易失控。
实操建议：
- 给报表容器设
display: grid，用grid-template-areas显式命名区域（如"header header header" "sidebar main main" "footer footer footer"），比纯数字行列更易维护 - 表头单元格用
grid-column: span 2实现跨列，比合并<th colspan="2"> 后再用 CSS 拉伸更可靠——后者在打印或缩放时容易断裂 <li>避免用 <code>width: 100%套嵌在 grid item 内：它会和grid-template-columns冲突，导致列宽坍缩或溢出 - 表头不动但数据列错位——没给
table或div容器加overflow-y: auto，sticky失效 - 第一行冻结了，第二行表头（如分组标题）不冻——每个
<tr> 都要单独设 <code>position: sticky和不同top值（如top: 0、top: 48px） - 导出 PDF 时冻结失效——
sticky是运行时行为，服务端渲染或打印预览不支持，需额外用 JS 截图或后端生成静态快照 -
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))))：浏览器自动计算能塞几列，每列最小 160px、最大均分剩余空间；比auto-fill更节省空列渲染开销 - 含长文本列（如备注）加
min-width: 0和overflow: hidden，否则1fr会被文本撑爆，破坏网格结构 - IE 不支持
minmax()和auto-fit，若需兼容，得降级为媒体查询 + 固定列数，或改用display: table（仅限简单场景） - 若用
div + grid，所有子元素统一box-sizing: border-box，尤其注意padding和border是否被重复计算 - 字体度量差异：Chrome/Firefox 对
line-height解析略有不同，表头高度建议用min-height而非height，留出安全余量
表头冻结必须用 position: sticky + top，不是 fixed
position: fixed 会让表头脱离文档流，后续内容直接上浮遮挡；而 sticky 是相对父容器的“条件定位”，滚动到临界点才吸附，天然适配报表容器的局部滚动场景。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
响应式报表优先用 minmax() 和 auto-fit，别写死像素宽度
报表列数多时，硬写 grid-template-columns: 120px 150px 200px ... 会导致小屏横向滚动或内容挤压；用函数式定义才能让列宽随内容弹性伸缩。
参数差异与性能影响：
复杂表头对齐失败，大概率是 box-sizing 或 border-collapse 混用
当表头文字偏移、列线错位、合并单元格边缘露白，90% 是盒模型或表格渲染模式冲突。原生 <table> 和自定义 grid 表格不能混用同一套样式逻辑。
<p>关键检查点：</p>
<ul><li>若用 <code><table>，必须设 <code>border-collapse: collapse，否则 border-spacing 会制造不可控间隙
最麻烦的其实是「表头分组 + 列排序图标 + 导出按钮」挤在一行时的宽度争夺——这时候不能只调 padding，得用 grid-template-columns 给图标区域分配固定 fit-content(24px)，把弹性留给文字内容。细节卡点太多，动一个值常要三处同步改。
