保持表头可读性（sticky header 可选）

横向滚动时，列标题容易移出视野。可在支持 sticky 的浏览器中让 thead th 固定：

• 给 thead 设置 display: block（配合 tbody 也设为 block）
• 给 th 添加 position: -webkit-sticky; position: sticky; top: 0; background: white; z-index: 1
• 注意：此时需为 th 和 td 显式设置 width 或使用 min-width，否则列宽可能错乱

移动端体验优化细节

单纯加滚动条还不够友好，需兼顾触控与可读性：

• 在小屏上禁用 font-size 缩放（如 iOS Safari 自动缩放），加 table { -webkit-text-size-adjust: 100%; }
• 给容器添加 -webkit-overflow-scrolling: touch，提升 iOS 滚动流畅度
• 对窄列（如操作按钮、状态标签）用 white-space: nowrap + text-overflow: ellipsis + overflow: hidden 控制显示
• 必要时用媒体查询，在极小屏（如 320px）隐藏非关键列，用 display: none

这个方案不依赖框架，兼容到 IE11，适合内容优先、列数不多、允许横向滑动的场景。如果表格结构复杂或需多维响应（比如转为卡片堆叠），可结合 CSS Grid 或 JavaScript 动态重排，但 display block + overflow auto 已解决大多数压缩问题。