真正可行的方案是用CSS重构表格视觉呈现：桌面端保持display: table，移动端用媒体查询切换为flex或grid布局，并为<td>添加data-label属性以保障可访问性。
原生 <table> 在小屏上基本没法直接“响应式”，硬缩会导致文字糊成一片、点击区域错乱。真正可行的方案不是修表格，而是用 CSS 重构它的视觉呈现——保留语义结构，换掉渲染逻辑。
用 display: flex 替代 table 渲染（推荐首选）
这是目前兼容性好、可访问性强、代码清晰的主流解法。不改 HTML，只靠 CSS 切换布局行为。
- 桌面端保持
display: table，移动端用媒体查询覆盖为display: flex; flex-direction: column -
<tr>设为display: flex; flex-direction: column，变成垂直卡片 -
<td>和<th>改为display: flex; justify-content: space-between，左侧用::before注入data-label，右侧放内容 - 必须给每个
<td>加data-label="姓名"这类属性，否则移动端无法知道字段名 - 别用
orientation: portrait做断点判断——折叠屏展开后仍是 portrait，但宽度已超 800px，会误触发移动样式
用 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) 实现自适应列数
适合字段数量不固定、列宽需动态调整的场景，比如后台数据看板或仪表盘。
-
minmax(120px, 1fr)保证每列至少 120px 可读，又不会撑满整行浪费空间 -
auto-fit比auto-fill更实用：空列会被自动收缩，避免出现大量空白列 - 配合
gap控制单元格间距，align-items: center垂直居中，长文本建议设align-items: start防止拉伸整行高度 - 小屏下仍需媒体查询降级为单列：
@media (max-width: 600px) { grid-template-columns: 1fr; } - 注意：IE 完全不支持
auto-fit，如需兼容 IE，只能退回固定列数 + 手动断点
横向滚动容器仅适用于报表类场景
当表格字段多、排序/筛选操作频繁、且用户明确需要横向比对时，滚动容器是合理选择——但它不是“响应式”，只是“能看”。
立即学习“前端免费学习笔记（深入）”；
- 包裹容器必须设
overflow-x: auto和max-width: 100%，否则在 iOS Safari 上可能失效 -
<table>内部要加white-space: nowrap，防止内容自动换行破坏对齐 - 禁用
border-collapse: collapse，改用border-spacing: 0+ 单独控制边框，否则滚动时边框会错位 - 测试重点：Chrome DevTools 里用 “Capture screenshot” 截长图，确认滚动边界是否自然、无白边或截断
- 别在移动端表单页、详情页用这个方案——用户要滑十几次才能看到最后一列，体验极差
最易被忽略的点是 data-label 的维护成本：一旦表格列顺序变动或新增字段，所有 data-label 都得手动同步。没有自动化手段的话，建议把这一步写进团队 Code Review checklist 里。
