不能直接给 <table> 加 display: grid，否则 <thead>、<colgroup>、rowspan 等语义结构失效，屏幕阅读器无法识别表头关联，Excel 导出失败，且 grid-column 等属性不生效。
不能直接给 <table> 加 display: grid，否则语义结构和无障碍支持全丢，导出 Excel 也会失败——必须用 <div> 重写结构。
为什么不能给 <table> 设 display: grid
浏览器会立刻废除 <thead>、<colgroup>、rowspan 等语义，屏幕阅读器读不到表头与数据的关联，JavaScript 通过 table.rows 或 cellIndex 获取的位置信息也全部失效。更隐蔽的问题是：<tr> 在 Grid 容器里会被强制渲染为 display: table-row，你写的 grid-column 属性根本不起作用。
常见错误现象：
- 加了
display: grid后列宽忽大忽小，滚动时错位 - 用
display: contents想“透传”子元素进 Grid，结果整行被跳过，DOM 节点在 DevTools 里直接消失 - 混合写法（比如
<table>里嵌<div class="grid-row">）在 Chrome 和 Safari 渲染不一致
怎么写 HTML 结构才安全
用语义化但无表格含义的标签替代：外层用 <div class="grid-table">，每行用 <div class="row">，每单元格用 <div class="cell">。别留任何 <table>、<tr>、<td> 标签。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 表头单独抽成一个
<div class="header-row">，和内容区物理分离——这是实现表头固定的前置条件 - 如果原表格有
colspan或rowspan，改用grid-column/grid-row显式控制跨度，例如：grid-column: 1 / -1表示横跨全部列 - 禁用
grid-auto-flow: dense，表格数据必须严格按行顺序填充，否则排序后列对不上
关键样式怎么配才不撑破列
fr 单位不是“平均分”，而是“按剩余空间比例分配”。只要某列内容（比如长文本、图片）没设约束，它就会吃掉更多空间，其他列被压缩到看不见。
防撑破三件套必须一起上：
-
min-width: 0（加在需要收缩的.cell上） -
overflow: hidden（配合上面生效） -
text-overflow: ellipsis+white-space: nowrap（针对纯文本列）
列宽定义推荐写法：
- 等宽三栏：
grid-template-columns: repeat(3, 1fr) - 主内容 60% + 左右各 20%：
grid-template-columns: 0.2fr 0.6fr 0.2fr（注意不是百分比） - 响应式自适应列数：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))
表头固定和响应式切换怎么稳住
Grid 本身不支持“冻结某几行”，position: sticky 在整个 Grid 容器内滚动时会整体位移。必须物理拆开容器：表头用一个 <div class="header-grid">，内容体另起一个 <div class="body-grid">，两者共用同一套 grid-template-columns 定义。
响应式切换列数时，只改 grid-template-columns 不够——如果用了 grid-template-areas，断点里必须重写整个字符串，且每行引号内的区域名个数必须严格一致，否则整条声明静默失效。
容易被忽略的点：
- 滚动条宽度会影响列宽计算，Chrome 94+ 可加
scrollbar-gutter: stable预留空间 - 移动端隐藏“操作”列时，不能只靠
display: none，必须同步删掉对应轨道，否则列宽失衡 - 金额列要对齐小数点，得在外层右对齐基础上，再套一层
display: grid，把整数和小数部分拆成两列控制
