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