移动端表格横向滚动需包裹块级容器并设宽高约束，加 overflow-x: auto 和 -webkit-overflow-scrolling: touch；固定表头推荐拆分 thead/tbody 或用 div 模拟表格。
移动端表格内容被截断，横向滚动不生效
直接给 table 加 overflow-x: auto 通常没用——因为表格默认会撑开父容器，且 table 元素本身不响应 overflow，必须包裹一层块级容器并设宽高约束。
- 父容器需设
display: block（默认是inline行内表现），否则overflow不触发 - 必须显式设置
width或max-width，比如width: 100%或max-width: 100vw - 加
white-space: nowrap到td/th可防文字换行干扰宽度计算（但慎用，会影响可读性）
用 overflow-x: auto 包裹时，滚动条在 iOS 上不显示
iOS Safari 默认隐藏滚动条，且对 overflow 的触发更严格。光有 overflow-x: auto 不够，还需强制启用滚动行为。
- 给包裹容器加
-webkit-overflow-scrolling: touch（iOS 专属，提升滚动流畅度） - 添加
scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }（WebKit）来统一控制视觉，但别删掉滚动能力 - 确保容器有明确的
height或min-height，否则 iOS 可能无法识别可滚动区域
表格列太多，固定表头 + 横向滚动难实现
原生 table 很难同时做到「表头固定」和「横向滚动」，因为 thead 和 tbody 是同级结构，滚动时会一起动。
- 推荐拆分为两个独立
table：一个只放thead（设position: sticky; top: 0），另一个放tbody并套滚动容器 - 或者改用语义化更松的结构：用
div模拟表格（display: table系列值），便于控制各部分定位与溢出 - 若用 JS 库（如 DataTables），确认是否启用了
scrollX: true和fixedHeader: true组合，并检查其 CSS 是否被覆盖
<div class="table-wrapper">
<table class="data-table">
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>地址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>zhang@example.com</td><td>13800138000</td><td>北京市朝阳区</td><td>编辑</td></tr>
<!-- 更多行 -->
</tbody>
</table>
</div>
对应关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.table-wrapper {
display: block;
width: 100%;
max-width: 100vw;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table {
min-width: 768px; /* 确保内容足够宽才触发滚动 */
width: fit-content;
}
.data-table th,
.data-table td {
padding: 8px 12px;
white-space: nowrap;
}
复杂点在于：不同设备像素比、缩放级别、以及某些安卓 WebView 对 fit-content 支持不佳，建议用 min-width 配合媒体查询做兜底。另外，如果表格含 input 或 select，滚动时焦点可能丢失，需要额外处理 touchstart 延迟或 pointer-events 控制。
