小屏幕表格溢出时 overflow-x: auto 失效，需用 div 包裹并设 overflow-x: auto、-webkit-overflow-scrolling: touch、width: 100%，table 设 min-width: max-content 和 table-layout: fixed；固定表头需 JS 实现。
小屏幕下表格溢出时直接加 overflow-x: auto 不生效？
因为 <table> 默认是块级元素，但它的内部单元格（<td>、<th>）会撑开父容器，导致 overflow-x: auto 失效——滚动条根本不会出现。关键不是加不加样式，而是得让表格“被约束住”，且内容能横向滑动。
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 把
<table>包在一层<div>容器里，并给该<div>设置overflow-x: auto和width: 100% -
<table>自身加min-width: max-content（或具体像素值），防止被压缩折行 - 移除默认的
table-layout: auto（浏览器默认），改用table-layout: fixed配合width: 100%可控性更强，尤其列多时
移动端 Safari 滚动卡顿或无法拖动？
iOS Safari 对 overflow-x: auto 的滚动支持有隐式限制：如果容器没设 -webkit-overflow-scrolling: touch，手指拖动可能无效或迟滞。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须给包裹
<table>的外层<div>加上-webkit-overflow-scrolling: touch - 避免在该容器上同时设置
height或max-height（除非你真需要截断），否则可能触发双层滚动或冲突 - 不要对
<table>或其<tr>设display: block类样式——这会破坏表格语义和可访问性，也容易引发渲染错乱
如何让表头（<thead>）在滚动时固定？
纯 CSS 实现固定表头 + 横向滚动，目前没有兼容性好又无需 JS 的通用方案。CSS position: sticky 在 <th> 上只对垂直滚动生效，横向滚动时 left 并不 sticky。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若只要横向滚动，**不固定表头**是最稳定的选择；强行固定需 JS 监听
scrollLeft并手动同步<thead>位置 - 如必须固定，推荐用轻量库如
sticky-table-headers或手写逻辑：监听外层<div>的scroll事件，动态设置<thead>的transform: translateX(...) - 别用
position: absolute脱离文档流——会导致表头与主体列宽不同步，尤其响应式缩放后错位严重
<div style="overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%;">
<table style="min-width: max-content; table-layout: fixed; width: 100%;">
<thead>
<tr><th>姓名</th><th>邮箱</th><th>部门</th><th>入职时间</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>zhang@example.com</td><td>前端</td><td>2022-03-15</td></tr>
<tr><td>李四</td><td>li@example.com</td><td>后端</td><td>2021-08-22</td></tr>
</tbody>
</table>
</div>
横向滚动本身不难，真正麻烦的是滚动行为的一致性、iOS 的 touch 支持、以及固定表头这种“看似简单实则要权衡”的需求——很多项目卡在这一步，不是代码写不对，而是没意识到 overflow-x 在表格场景下的特殊约束。 
