直接给<table>加overflow-x:auto无效，必须用设width:100%、overflow-x:auto、white-space:nowrap的<div>包裹，并将<table>设为display:block和min-width:max-content，同时iOS需加-webkit-overflow-scrolling:touch。
直接给 <table> 加 overflow-x: auto 或 overflow-y: auto 无效——这是最常踩的坑，浏览器把表格当作独立格式化上下文，会无视自身溢出设置，优先按内容撑宽。
为什么外层 <div> 必须设 width 和 white-space: nowrap
滚动条能否出现，取决于容器是否“感知到溢出”。而 <td> 默认允许换行、自适应宽度，一旦文字折行或单元格被压缩，表格实际宽度就变小了，根本达不到溢出条件。
-
width（或max-width）提供明确边界，是触发溢出的硬性前提 -
white-space: nowrap防止<th>/<td>内文本意外换行，干扰宽度计算 - 若父容器是 flex 布局（如 Bootstrap 的
.row），还需加display: block，否则会被 flex 主轴强行压缩 - 移动端必须加
-webkit-overflow-scrolling: touch，否则 iOS Safari 拖拽卡顿甚至无响应
<table> 本身要加哪些样式才能配合滚动
脱离原生表格渲染流，是让滚动生效的关键一步。不改 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：尤其在百分比列宽场景下，避免列宽被长内容顶破
嵌套子表格水平滚动失效的真正原因
主表某一行里放子表格时，<td> 默认 width: auto 且会无限撑开，导致外层 <div> 宽度始终等于子表格内容宽——滚动容器根本没有“上限”，自然不触发滚动。
立即学习“前端免费学习笔记（深入）”；
- 解决方法不是只加
overflow-x: auto，而是先给<td>或其内部<div>设max-width: 600px（具体值按业务定） - 子表格自身也要设
display: block和min-width: max-content - 避免在子表格单元格上设固定
width总和超限，否则内容溢出但外部无滚动条 - 如果主表用了
table-layout: auto，可能干扰子容器宽度继承，可临时改为table-layout: fixed测试
真正卡点不在写了多少行 CSS，而在是否切断了表格默认的宽度传播逻辑——漏掉 display: block 或没设 max-width，整个滚动链就断了。
