如何通过CSS媒体查询优化复杂表格在不同设备上的响应式布局？

本文共计832个文字，预计阅读时间需要4分钟。

移动端屏幕强化行为让 屏幕

• 外层容器加 overflow-x: auto，并设 -webkit-overflow-scrolling: touch 提升 iOS 滚动手感
• <table> 自身不设 width: 100%，改用 min-width: 600px（根据列数估算）防止被压缩变形
• 避免在 <td> 里用 white-space: normal 强制换行——它会打乱表头与数据的列对应关系

用 @media 把表格转成卡片式布局需重写 DOM 结构

纯 CSS 无法把 <tr><td> 语义结构转成垂直堆叠的卡片，display: contents 在旧版 Safari 不支持，且会丢失可访问性。真要“响应式表格变卡片”，得靠 JS 动态生成新结构，或服务端输出两套 HTML。