直接给<table>加overflow无效，因<table>是替换元素不支持overflow裁剪；必须用<div>包裹并设置max-height、overflow-y:auto、display:block，且表头固定需配合position:sticky、显式background和z-index。
为什么直接给 <table> 加 overflow 没用
浏览器把 <table> 当作独立格式化上下文，它会无视自身 overflow 设置，优先按内容撑开宽度或高度。哪怕写了 style="overflow-y: auto; height: 300px"，也完全不生效——滚动条压根不会出现。
<div> 容器必须设哪些样式才能触发滚动
滚动行为只能由外层 <div> 控制，漏掉任意一项都可能导致滚动条“看不见”或“拖不动”：
-
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>要加white-space: nowrap，阻止单元格内文本换行干扰宽度计算 -
<table>自身加display: block; min-width: max-content，让它脱离表格渲染流 - 每个
<td>或<th>内部若含长单词/URL，需额外加word-break: break-all或overflow-wrap: break-word
max-height 被父级覆盖、又或者表格里某张图片没设 max-width: 100% 把整个布局顶开了。 
