直接给加overflow无效，因是替换元素不支持overflow裁剪；必须用包裹并设置max-height、overflow-y:auto、display:block，且表头固定需配合position:sticky、显式background和z-index。
为什么直接给 <table> 加 <code>overflow 没用
浏览器把 <table> 当作独立格式化上下文，它会无视自身 <code>overflow 设置，优先按内容撑开宽度或高度。哪怕写了 style="overflow-y: auto; height: 300px"，也完全不生效——滚动条压根不会出现。
<div> 容器必须设哪些样式才能触发滚动
<p>滚动行为只能由外层 <code><div> 控制，漏掉任意一项都可能导致滚动条“看不见”或“拖不动”：
<ul>
<li>
<code>max-height 或 height：必须显式设置（如 max-height: 400px），min-height 不触发溢出判定
overflow-y: auto：推荐而非 overflow: auto，避免意外水平滚动overflow-x: hidden：防止长文本或未约束列宽撑破容器display: block：尤其在 Flex/Grid 布局中，防止父容器压缩表格宽度固定表头时 position: sticky 怎么写才不穿帮
只加 position: sticky; top: 0 不够，滚动时文字可能穿透背景：
-
background必须显式设置（如background: #fff），不能依赖继承 -
z-index至少为10，否则可能被后续内容遮盖 -
th元素需是块级或行内块级，避免因默认display: table-cell导致粘性失效
横向滚动时表格列宽失控怎么办
水平滚动最常卡在列宽自动撑开，导致 overflow-x: auto 失效：
- 外层
<div> 要加 <code>white-space: nowrap，阻止单元格内文本换行干扰宽度计算 <table> 自身加 <code>display: block; min-width: max-content，让它脱离表格渲染流- 每个
<td> 或 <code><th> 内部若含长单词/URL，需额外加 <code>word-break: break-all或overflow-wrap: break-word实际滚动是否生效，取决于容器是否真正“感知到溢出”——不是看代码写了什么，而是看浏览器计算后内容尺寸是否确实越界。很多情况下，滚动条没出来，只是因为容器高度被 Flex 拉伸、或max-height被父级覆盖、又或者表格里某张图片没设max-width: 100%把整个布局顶开了。
