直接给加overflow-x:auto无效，必须用设width:100%、overflow-x:auto、white-space:nowrap的包裹，并将设为display:block和min-width:max-content，同时ios需加-webkit-overflow-scrolling:touch。
直接给 <table> 加 <code>overflow-x: auto 或 overflow-y: auto 无效——这是最常踩的坑，浏览器把表格当作独立格式化上下文，会无视自身溢出设置，优先按内容撑宽。
为什么外层 <div> 必须设 <code>width 和 white-space: nowrap
滚动条能否出现，取决于容器是否“感知到溢出”。而 <td> 默认允许换行、自适应宽度，一旦文字折行或单元格被压缩，表格实际宽度就变小了，根本达不到溢出条件。
<ul>
<li>
<code>width（或 max-width）提供明确边界，是触发溢出的硬性前提
white-space: nowrap 防止 <th>/<code><td> 内文本意外换行，干扰宽度计算
<li>若父容器是 flex 布局（如 Bootstrap 的 <code>.row），还需加 display: block，否则会被 flex 主轴强行压缩-webkit-overflow-scrolling: touch，否则 iOS Safari 拖拽卡顿甚至无响应<table> 本身要加哪些样式才能配合滚动
<p>脱离原生表格渲染流，是让滚动生效的关键一步。不改 <code>display，min-width: max-content 就不起作用。
html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
- 必须设
display: block：让表格变成块级元素，响应外部 overflow
- 必须设
min-width: max-content：确保表格最小宽度 = 所有列内容总宽，否则滚动条“没东西可滚”
- 禁用
width: 100%：它会让表格反向拉伸填满父容器，彻底失去溢出前提
- 推荐加
table-layout: fixed：尤其在百分比列宽场景下，避免列宽被长内容顶破
嵌套子表格水平滚动失效的真正原因
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
display: block：让表格变成块级元素，响应外部 overflowmin-width: max-content：确保表格最小宽度 = 所有列内容总宽，否则滚动条“没东西可滚”width: 100%：它会让表格反向拉伸填满父容器，彻底失去溢出前提table-layout: fixed：尤其在百分比列宽场景下，避免列宽被长内容顶破主表某一行里放子表格时，<td> 默认 <code>width: auto 且会无限撑开，导致外层 <div> 宽度始终等于子表格内容宽——滚动容器根本没有“上限”，自然不触发滚动。
<ul><li>解决方法不是只加 <code>overflow-x: auto，而是先给 <td> 或其内部 <code><div> 设 <code>max-width: 600px（具体值按业务定）
display: block 和 min-width: max-content
width 总和超限，否则内容溢出但外部无滚动条table-layout: auto，可能干扰子容器宽度继承，可临时改为 table-layout: fixed 测试真正卡点不在写了多少行 CSS，而在是否切断了表格默认的宽度传播逻辑——漏掉 display: block 或没设 max-width，整个滚动链就断了。
