纯靠table标签+默认样式在移动端不可用，必须加viewport meta标签、设table-layout:fixed、用百分比控列宽、小屏改display:block堆叠、多列时用overflow-x:auto滚动。
直接说结论：纯靠 table 标签 + 默认样式，在移动端基本没法看——列挤、字糊、横向溢出、点击区域错位，不是“要不要适配”，而是“不处理就不可用”。
viewport meta 标签漏了，后面全白搭
这是所有问题的起点。没这行，iOS 和安卓 WebView 都会按 980px 渲染，再缩放塞进屏幕，table 宽度算出来全是错的，媒体查询断点也失效。
- 必须加：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
user-scalable=no别写，影响可访问性，上线前删掉 - 别用
maximum-scale=1.0，部分安卓 WebView 不认，横屏时卡死
table-layout: fixed 是响应式表格的硬门槛
默认的 table-layout: auto 会让浏览器等所有内容加载完再算列宽，移动端一卡一卡，而且列宽随内容疯长。换成 fixed 才能控住节奏。
- 必须配合
width: 100%，否则fixed没意义 -
<th>或<td>上得设宽度（推荐百分比，比如width: 25%），否则剩余列均分，容易某列窄到文字堆成一团 - 如果某列内容特别长（如 URL、日志片段），加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，不然撑爆容器
@media 中怎么切断点才不翻车
别照搬“手机用 480px、平板用 768px”这种过时经验。现在主流是折叠屏、大屏手机，max-width: 600px 或 max-width: 768px 更稳妥。
立即学习“前端免费学习笔记（深入）”；
- 优先用
@media (max-width: 600px)覆盖小屏逻辑，别混用min-width和max-width，容易样式打架 - 在断点里别只改字体大小，重点改
table的 display 行为：比如把<tr>改成display: block，<td>改成display: block并用::before插入列名，实现行堆叠 - 避免对整个
table做transform: scale(0.8)这类取巧操作——DPR 高的设备上字体发虚，触摸热区偏移
横向滚动不是万能解，但有时最省事
数据列多、又不能删字段时，水平滚动反而是最直白、兼容性最好的方案，比 JS 动态列切换更稳。
- 包裹一层
<div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">，iOS 滚动更顺 - 加
min-width: fit-content到table上，防止空内容时表格塌缩 - 别忘了加视觉提示：比如在右侧加个渐变遮罩，或用
::after伪元素标“← 可滑动 →” - 测试时真机拖拽，别只靠 DevTools 模拟——某些安卓 WebView 对
overflow-x支持差，需要 fallback 方案
真正麻烦的从来不是写几行 CSS，而是得想清楚：这表格到底要用户在手机上干什么？查单条记录？比对两列数值？还是快速扫视？不同目标，该用堆叠、滚动还是卡片化，根本不是技术选型问题，是交互意图问题。
