直接给加overflow-x:auto无效，因表格是独立格式化上下文且会撑宽父容器；必须用设width:100%、overflow-x:auto、-webkit-overflow-scrolling:touch的包裹，并让table设display:block和min-width:fit-content。
直接给 <table> 加 <code>overflow-x: auto 没用，这不是写法错了，而是浏览器根本不让它生效——表格天生“抗约束”，必须用外层容器接管宽度控制权。
为什么 <table> 不能直接设 <code>overflow-x: auto
浏览器把 <table> 当作一个有内在尺寸的「替换元素」，它会主动撑开父容器，无视 <code>overflow 设置。哪怕你写了 width: 100%，只要内部有长单词、固定列宽或 white-space: nowrap，它就继续往外顶，父容器压根“感知不到”溢出，滚动条自然不会出现。
<table> 默认是表格格式化上下文（table formatting context），不响应外部溢出控制<li>单元格最小自然宽（比如一串无空格的 URL）会强制撑开整张表</li> <li>iOS Safari 下即使样式正确，也可能触控拖拽卡顿或不跟手</li> <h3><code><div> 包裹容器必须满足的三个硬性条件<p>真正起作用的是外层 <code><div>，但它不是加个 <code>overflow-x: auto就完事。缺一不可：- 必须设
width或max-width（例如width: 100%或max-width: 100vw），否则没有“边界感”，溢出逻辑不触发 - 必须加
overflow-x: auto和overflow-y: hidden（防意外纵滚干扰体验） - iOS Safari 必须加
-webkit-overflow-scrolling: touch，否则滑动生涩甚至失效
<table> 本身要做的关键样式调整<p>让表格配合外层容器，得先“缴械”它的默认行为：</p> <ul> <li>加 <code>display: block：这是最关键的一步，切断表格布局算法，让它变成普通块级流内元素- 必须设
- 避免
table-layout: fixed除非你已为每列设了明确width，否则它会和父容器宽度冲突 - 删掉所有
white-space: nowrap，或对长内容加word-break: break-all/overflow-wrap: break-word - 不要用
display: flex或display: grid作为 wrapper，除非同时配了min-width: 0
一个最小可运行结构示例
<div class="table-wrapper"> <table> <thead><tr> <th>ID</th> <th>Email</th> <th>Description</th> </tr></thead> <tbody><tr> <td>1</td> <td>user@example.com</td> <td>This-is-a-very-long-unbroken-string-with-no-spaces</td> </tr></tbody> </table> </div>
CSS 部分：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
.table-wrapper {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.table-wrapper table {
display: block;
min-width: fit-content; /* 让表格按内容最小宽度伸展，但受父容器限制 */
}
.table-wrapper td,
.table-wrapper th {
word-break: break-word;
}
最常被忽略的一点：不是所有“看起来像表格”的结构都适合走滚动路线——如果列数太多、行数极大，或需要固定表头/列，overflow-x: auto 只是起点，后续还得考虑虚拟滚动、列折叠或卡片化重构。
