移动端表格横向滚动需打断默认宽度传播：外层容器设max-width、height/max-height、-webkit-overflow-scrolling: touch及touch-action: pan-x；table设display: block、min-width: max-content或white-space: nowrap；th/td加white-space: nowrap；列宽用min-width固定；可访问性需用aria或卡片式降级。

让表格在移动端小屏幕正常横向滚动，关键不是“加个 overflow 就完事”，而是打断表格默认的宽度传播逻辑，并适配各平台的渲染特性。iOS Safari 和部分安卓 WebView 对横向 touch 滚动支持弱，直接写 overflow-x: auto 很可能没反应或卡顿。

外层容器必须设明确尺寸和滚动行为

不能只靠 overflow-x: auto，容器需同时满足以下条件：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 设 max-width: 100% 或具体宽度（如 width: 100vw），避免弹性上下文导致宽度计算失效
• 必须设 height 或 max-height（哪怕只是 max-height: 50vh），否则 iOS Safari 不触发 -webkit-overflow-scrolling: touch
• 加上 -webkit-overflow-scrolling: touch —— 这是 iOS 12–15 的刚需，不加大概率拖不动
• 补上 touch-action: pan-x，防止浏览器误判为缩放手势而拦截滑动
• 避免同时写 overflow: scroll 和 overflow-x: auto，iOS 会优先按前者处理，忽略 x 方向控制

表格本身要脱离原生渲染流

<table> 是独立格式化上下文，不加干预就永远撑宽父容器。必须主动切断： <ul><li>给 <code><table> 加 <code>display: block，让它响应外部 overflow

设 min-width: max-content（现代浏览器）或 min-width: 100% + white-space: nowrap（兼容旧 Android）

绝对不要写 width: 100%，它会让表格反向拉伸填满容器，彻底失去溢出前提

所有 <th> 和 <code><td> 加 <code>white-space: nowrap，防止文本换行破坏宽度计算

表头对齐与列宽控制

display: block 后 <thead> 和 <code><tbody> 脱离表格布局，列容易错位： <ul><li>为每列的 <code><th> 和对应 <code><td> 设置相同 <code>min-width（如 min-width: 120px），不依赖百分比

若需固定表头，position: sticky 必须同时作用于 <th> 和该列所有 <code><td>，且显式设 <code>z-index 和背景色

避免 table-layout: fixed 配合百分比宽度——小屏下压缩严重，字段不可读

可访问性与降级方案

一旦加 display: block，屏幕阅读器就无法识别表格语义：

• 若数据有强行列关联（如财务、课表），建议改用 <div role="table"> 手动重建 ARIA 结构 <li>至少保留 <code>role="columnheader" 和 aria-labelledby 显式绑定关系
• 更稳妥的降级方式：用 @media (max-width: 768px) 切换为卡片式布局，每行转成一个 <div class="card">，用 <code>data-label 标注原列名