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