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