响应式数据表披露契约

大理论

表格适合展示需要按行列比较的数据，但它也最容易在移动端、读屏、键盘导航和批量操作中失败。健康的数据表设计先明确“用户比较什么”，再决定列、排序、筛选、行内动作、批量动作和移动端替代表达。不是所有桌面表格都应该在手机上变成横向滚动容器。

小知识点

1. 每张表需要 caption/标题、主对象列、列标题和必要 scope/headers 关联，不能用表格做布局。
2. 列优先级要早于样式：primary、secondary、optional、detail-only、action。移动端只保留 primary/secondary，其余进入展开详情或卡片行。
3. 横向滚动适合短期查看宽表，但要有明确阴影/提示、固定首列或行标题、键盘可达和不遮挡焦点环。
4. 对许多移动表格，更合理的是转换为嵌套列表或卡片行：主键作为一级项，关键字段作为属性列表。
5. 批量操作模式和行内操作模式不能同时抢焦点；批量选择后行内 overflow/单行按钮应降权或禁用。
6. 空、加载、无权限、筛选无结果、部分失败和导出状态都应是表格契约的一部分。

设计判断

如果用户在桌面能比较列，在移动端能识别每行对象和关键字段，读屏能读出表头关系，键盘能完成排序/筛选/选择/操作，这个表格契约才成立。

实现建议

建立 table contract：caption、rowKey、primaryColumn、columnPriority、sortableColumns、filterModel、selectionMode、batchActions、rowActions、mobileMode(table-scroll/card-list/nested-list)、emptyStates、ariaDescription。React 实现时不要把 div 网格伪装成表格；若使用虚拟化或 data grid，额外验证 aria-rowcount、aria-colcount、焦点保留和屏幕阅读器行为。移动卡片模式要保留同一数据源和同一操作权限，不要复制两套逻辑。

反例/风险

移动端把 12 列表格压成 9px 字；表头固定但行内容横滑不同步；排序图标没有 aria-sort；批量选择后仍能点单行删除；卡片模式丢失列标题；导出结果和当前筛选不一致；表格无 caption，读屏用户不知道数据范围。

案例分析

W3C WAI 表格教程强调数据表需要结构化标记把 header 和 data cell 关联起来；WAI 移动响应式表格技巧建议许多表格在移动端改成嵌套列表；Carbon Data Table 把排序、批量操作、行内操作和 hover/focus 显示边界拆开说明。可学习点是：表格设计不能只做视觉网格，而要把语义、响应式重组和操作模式作为同一契约。

来源链接

W3C WAI Tables Tutorial: https://www.w3.org/WAI/tutorials/tables/ WAI Responsive Data Tables: https://w3c.github.io/wai-mobile-intro/mobile/responsive-tables/ Carbon Data Table Usage: https://carbondesignsystem.com/components/data-table/usage/ GOV.UK Table Component: https://design-system.service.gov.uk/components/table/