真正可行的方案是用css重构表格视觉呈现：桌面端保持display: table，移动端用媒体查询切换为flex布局，并为添加data-label属性以保障可访问性。
原生 <table> 在移动端直接缩放或强制换行，99% 会糊成一片、点击错位、阅读困难——这不是 CSS 不够强，而是表格渲染逻辑天生不适合窄屏。真正优雅的方案是用 CSS 重构视觉层，不改 HTML 语义，只换呈现方式。
<h3>用 <code>@media + display: flex 切换卡片布局
这是目前兼容性好、可访问性强、代码清晰的首选解法：桌面端保持表格结构，移动端把每行 <tr> 变成垂直卡片，每个 <code><td> 变成带标签的字段块。
<ul><li><code><thead> 必须设 <code>display: none，只隐藏 <th> 不够，空行仍占 DOM 位置
<li>每个 <code><td> 必须带 <code>data-label 属性，例如 <td data-label="订单号">ORD-2026-789</td>，否则移动端根本不知道这列是啥
td::before { content: attr(data-label) ": "; font-weight: bold; } 注入标签，td 需配 position: relative 和 padding-left: 80px 避免重叠max-width: 768px，iPad 分屏后可视宽度可能只剩 400px；推荐 @media screen and (max-inline-size: 600px)（Chrome 105+/Firefox 103+/Safari 16.4+ 支持）
overflow-x: auto 容器仅适用于报表类场景
它不是“响应式”，只是“能看”。适合字段多、需横向比对、且用户明确接受滑动操作的后台页面。
- 必须用
<div class="table-container"> 包裹 <code><table>，不能直接对 <code><table> 设 <code>overflow -
.table-container要同时设max-width: 100%和width: 100%，否则超宽屏下可能撑破布局 <table> 内部加 <code>white-space: nowrap防止文本自动折行破坏对齐，但禁用border-collapse: collapse，改用border-spacing: 0+ 单独边框，否则滚动时边框错位- iOS Safari 需加
-webkit-overflow-scrolling: touch才有惯性滚动，漏了就卡顿 -
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))是核心：每列至少 120px 保证可读，又不会浪费空间 -
auto-fit比auto-fill更实用——空列会被自动收缩，避免大片空白 - 配合
gap: 8px控制单元格间距，align-items: start防止长文本拉伸整行高度 - IE 完全不支持
auto-fit，如需兼容 IE，只能退回固定列数 + 手动断点
display: grid 实现自适应列数（字段数量不固定时）
适合数据看板、仪表盘这类列数动态变化的场景，但要求放弃原生 <table> 渲染流，或用 <code>display: contents 打散嵌套。
最易被忽略的其实是 data-label 的维护成本：一旦列顺序调整或新增字段，所有 data-label 都得手动同步——它不是一次写完就不管的属性，而是和表格结构强绑定的语义锚点。
