真正可行的方案是Grid控制视觉布局+原生<table>保留语义+display:contents桥接二者；因纯Grid表格无法通过无障碍三类检查：ARIA角色不能替代原生语义、键盘导航失效、无对应HTML表格属性机制。
直接用 display: grid 做复杂数据表，不加语义层和可访问性补救，等于把屏幕阅读器推进深水区——它看不见行列关系、读不出表头归属、无法导航单元格。真正可行的方案是：Grid 控制视觉布局 + 原生 <table> 保留语义 + display: contents 桥接二者。
为什么不能只用 div + grid 模拟表格
纯 Grid 表格（比如 .grid-table { display: grid }）在无障碍测试中会失败三类核心检查：
-
role="table"和role="row"等 ARIA 属性无法替代原生<table>的隐式语义，JAWS/NVDA 不识别列头与数据单元格的绑定关系 - 键盘导航（
Ctrl+Alt+方向键）在 Grid 容器中默认失效，用户无法像在真实表格中那样跳转行列 -
scope、headers、colspan等 HTML 表格属性在 div 结构中无对应机制，多级表头或跨列单元格无法被正确解析
用 display: contents 解耦视觉与语义
关键不是“不用 table”，而是让 <table> 元素本身参与 Grid 布局，而不是被当作黑盒包裹。做法是：
- 保持 HTML 结构为标准
<table>，含<thead>、<th scope="col">、<tbody>、<td headers="name"> - 对
<table>设置display: contents—— 这会让它“消失”于渲染树，但保留在 DOM 和辅助技术中 - 其子元素（
<thead>、<tbody>）设为display: grid，并用grid-template-columns控制列宽 - 必须给
<th>加id，<td>用headers显式引用，否则小屏切换后语义链断裂
响应式切换：从多列到单列堆叠
移动端不是简单缩放，而是重构信息流。用媒体查询切换两种模式：
立即学习“前端免费学习笔记（深入）”；
- 桌面端（≥768px）：
grid-template-columns: 120px 1fr 1fr 80px，固定操作列宽度，内容列弹性分配 - 移动端（grid-template-columns: 1fr，同时对
<tr>设display: grid，每个<td>变成独立行，并用::before { content: attr(data-label) ": " }补回表头文字 - 禁止用
display: none隐藏列——这会彻底移除语义。改用visibility: hidden+position: absolute移出视口，确保屏幕阅读器仍可读取
冻结表头 + 小屏滚动的兼容陷阱
想让 <thead> 在滚动时固定？别碰 position: sticky 直接作用于 <th> —— Safari 和旧版 Chrome 对 Grid 内 sticky 支持极差，且会破坏 headers 关联。
- 正确做法：外层套一个
div.table-scroller { overflow-y: auto; max-height: 500px }，<table>本身不设高度 -
<thead>用position: sticky; top: 0; z-index: 1，但必须加background: white防文字透底，且父容器需有transform: translateZ(0)触发硬件加速 - 测试重点：用 VoiceOver 手势滑动表格区域，确认每条
<td>仍播报完整headers内容，而非只读“空白单元格”
最易被忽略的是：所有响应式切换都必须同步更新 headers 属性值——比如小屏下把“操作”列折叠进详情弹窗，对应 <td> 的 headers 不能还指向已隐藏的 <th id="action">，否则辅助技术会报错“引用不存在的 ID”。
