小屏幕下表格应优先采用横向滚动而非换行，需外层设overflow-x:auto并配合min-width和-webkit-overflow-scrolling:touch；纯CSS无法可靠实现表格到卡片的语义转换，推荐JS动态生成或服务端双模板方案。
小屏幕下表格直接横向滚动比强行换行更可靠
移动端窄屏强行让 <table> 内容折行或堆叠，往往破坏数据对齐和可读性。更稳妥的做法是用 <code>overflow-x: auto 包裹表格，允许水平滑动。注意必须同时设置 min-width 或给 <th>/</th>
<td> 设固定最小宽，否则 Safari 可能忽略滚动行为。
<ul>
<li>外层容器加 <code>overflow-x: auto，并设 -webkit-overflow-scrolling: touch 提升 iOS 滚动手感
<table> 自身不设 <code>width: 100%，改用 min-width: 600px（根据列数估算）防止被压缩变形
<td> 里用 <code>white-space: normal 强制换行——它会打乱表头与数据的列对应关系
用 @media 把表格转成卡片式布局需重写 DOM 结构
纯 CSS 无法把 <tr><td> 语义结构转成垂直堆叠的卡片，<code>display: contents 在旧版 Safari 不支持，且会丢失可访问性。真要“响应式表格变卡片”，得靠 JS 动态生成新结构，或服务端输出两套 HTML。
- 若坚持纯 CSS，可用
display: grid+grid-template-areas模拟卡片，但需提前为每行定义区域名，维护成本高 - 更现实的做法：用
@media (max-width: 768px)隐藏原表格，显示一个<div class="table-card"> 区块，由 JS 把每行数据映射为带标签的字段组 <li>务必保留原 <code><table> 的 <code>role="table"和 ARIA 属性，隐藏时用aria-hidden="true"而非display: nonedisplay: table-cell在媒体查询中失效的常见原因当在
@media规则里把某个<div> 从 <code>block改成table-cell，常发现它不占宽度、不居中、甚至消失——根本原因是table-cell必须嵌套在display: table-row和display: table容器内，缺一不可。- 错误写法：
@media (min-width: 600px) { .cell { display: table-cell; } }（父元素仍是div默认block） - 正确写法：父容器同步设
display: table，再设子项display: table-cell；或用display: grid替代，兼容性更好 - 注意 IE11 对
table-cell的vertical-align行为有差异，测试时别只看 Chrome
复杂表格响应式真正的瓶颈不在 CSS，而在数据粒度
列数超过 8 列、含合并单元格（
rowspan/colspan）、嵌套表单控件的表格，无论怎么调@media，小屏体验都难兼顾可读性和操作性。这时候该问的是：这些字段是否必须同屏展示？能否按任务流分步呈现？立即学习“前端免费学习笔记（深入）”；
- 比如“订单详情表”可拆成：基础信息卡 → 物流状态卡 → 发票信息卡，用标签页或折叠面板切换
- 后台类表格优先提供列筛选功能，让用户自行隐藏非关键列，比预设一套响应规则更灵活
- 导出按钮比响应式更实在——很多用户宁可横屏截图或导出 Excel，也不愿在手机上左右划十次看一行数据
- 错误写法：
