真要“优雅降级”，必须放弃直接缩放或滚动table，转而用display: grid重构为卡片式布局，以语义退化但结构可控的方式适配移动端，兼顾可访问性与兼容性。
table 在移动端直接缩放或横向滚动，不是降级，是放弃思考。真要“优雅降级”，得承认一件事：table 元素的语义和渲染机制在小屏上天然失效——列宽错乱、文字溢出、表头丢失、无法单列操作。纯 CSS 降级的核心，是绕开 table 的布局逻辑，用语义退化但结构可控的方式呈现数据。
为什么不能对 table 直接加 @media 调整 font-size 或 padding
这类做法看似简单，实则埋雷：
- 横向内容超宽时，
overflow-x: auto会触发整个页面横向滚动，用户必须左右拖拽才能看全一行，且无法固定表头 -
display: block强制改tr/td会导致屏幕阅读器完全读不出行列关系，可访问性归零 - 即使加了
white-space: nowrap+text-overflow: ellipsis，td内部的input或图标按钮也会撑破容器，尤其在 iOS Safari 中 - 没有 JS 干预的情况下，无法动态识别哪列是主键、哪列需优先保留，所有列被“平均惩罚”
用 display: grid 模拟行结构，配合 grid-template-areas 控制信息优先级
这是目前最可控、无需 JS、兼容到 iOS 10.3 / Android 6+ 的纯 CSS 方案。关键不是“让表格变小”，而是“把每行数据重构成一张卡片”：
- 给
tbody设display: grid; grid-template-columns: 1fr;，让每行tr成为独立网格项 - 每个
tr内部设display: grid，用grid-template-areas显式声明字段顺序，例如："label1 value1" "label2 value2" "label3 value3" - 用
grid-area把每个td归位，同时搭配grid-column: 1 / -1让长文本跨列换行 - 表头
th不再作为列标题，而是转成每个卡片顶部的h3或带背景的标签，用display: none在桌面端隐藏，在移动端显示
示例片段：
tbody { display: grid; }
tr { display: grid; grid-template-areas: "key val" "desc desc"; gap: 4px; padding: 8px; border-bottom: 1px solid #eee; }
td:nth-child(1) { grid-area: key; font-weight: 600; }
td:nth-child(2) { grid-area: val; }
td:nth-child(3) { grid-area: desc; grid-column: 1 / -1; }
用 @supports + if() 实现渐进式增强，而非硬切布局
Chrome 137+、Safari 18.1+ 已支持 if() 函数，可以避免写两套样式。重点不是“有没有新语法”，而是用它守住降级底线：
- 检测是否支持
grid-template-areas：用@supports (grid-template-areas: "a b")包裹卡片式布局；不支持时回退到flex-direction: column+margin-bottom模拟 - 用
if(supports(display: grid): grid; else: flex)动态切换容器模式（注意：目前仅部分浏览器支持该写法，稳妥起见仍建议用@supports） - 对关键字段（如 ID、状态）用
if(media(width 控制响应式宽度，比媒体查询更精准 - 慎用
if(media(any-pointer: coarse))判断触控——某些安卓 WebView 会错误报告fine，建议只用于非关键样式（如按钮内边距）
真正容易被忽略的点：语义断层与焦点管理
纯 CSS 降级解决的是视觉呈现，但用户需要的是可操作的数据。如果表格里有开关、操作按钮、展开箭头，光靠 grid 或 flex 无法恢复原表格的键盘导航流（Tab 顺序、Shift+Tab 回溯）。此时必须接受一个事实：所谓“纯 CSS 优雅降级”，只适用于只读场景。一旦涉及交互，role="row"/role="cell" 等 ARIA 属性就得补上，而这些已超出 CSS 能力边界。别为了“纯 CSS”牺牲可用性——该加轻量 JS 就加，比如只监听 keydown 调整焦点索引，而不是重写整套表格逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
