局部滚动条需用带固定尺寸和overflow的div包裹table，禁用tbody/display:block破坏布局，WebKit伪元素仅限Chromium/Safari，Firefox不支持，iOS Safari默认隐藏滚动条且无标准显示方案。
局部滚动条只在表格内部生效，不能靠 body 或全局样式控制
表格本身不产生滚动，必须先让 <table> 或其容器（比如 <div>）具备固定尺寸和溢出裁剪，滚动条才可能出现在局部。直接对 table 元素设 overflow: auto 无效——table 默认是 inline-table 行为，且不响应 overflow。正确做法是用一个 <div> 包住表格，并设 overflow: auto 或 overflow-y: scroll。
常见错误：给 tbody 单独加 display: block + max-height，再设 overflow-y —— 这会破坏表格的原生布局逻辑，th/td 宽度错乱、表头与内容列无法对齐。
- ✅ 推荐结构：
<div class="table-container"><table>...</table></div></li> <li>✅ 容器必须设 <code>max-height
和overflow-y: auto - ❌ 避免对
thead、tbody单独设display: block（除非你用 JS 重写列宽同步逻辑）
::-webkit-scrollbar 只在 Chromium / Safari 有效，Firefox 不支持
想用 CSS 美化滚动条，只能走 WebKit 私有伪元素路线：::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb。Firefox 完全无视这些规则，也没有等效标准 API。这意味着：如果你的用户群包含大量 Firefox 用户，纯 CSS 方案无法统一外观。
实际效果取决于容器是否被识别为可滚动区域——只有当该容器触发了原生滚动（即有实际滚动行为），伪元素才会生效。如果容器高度足够、内容没溢出，::-webkit-scrollbar-thumb 就不会渲染。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 必须搭配
overflow-y: scroll或auto使用（hidden下伪元素不生效） - ✅
::-webkit-scrollbar本身设宽高，控制滚动条粗细 - ❌
scrollbar-color（Firefox 支持）和scrollbar-width仅控制颜色/宽度，无法定制 thumb 圆角、hover 效果等
表格固定表头 + 局部滚动时，thead 和 tbody 需独立定位
单纯包裹滚动容器会导致表头随内容一起滚动。要实现「表头固定、内容滚动」，不能依赖 position: sticky 在 th 上（兼容性差且在某些嵌套场景失效），更稳妥的是把 thead 和 tbody 拆成两个独立表格，或用 display: block 强制分离 —— 但后者必须手动同步列宽。
最简可控方案：用一个外层 <div> 做容器，里面放两个元素——<table>（仅含 thead）和另一个 <div>（含带 overflow-y 的 <table>，仅含 tbody）。然后用 JavaScript 监听 thead th 宽度变化，同步到 tbody td 的 min-width。
- ✅
thead表格设table-layout: fixed，width: 100% - ✅
tbody容器设max-height、overflow-y: auto，并禁用边框折叠（border-collapse: separate）避免错位 - ⚠️ 列宽同步若用 JS 实现，注意防抖，避免频繁 resize 触发重算
移动端 Safari 中局部滚动条默认隐藏，overflow-scrolling: touch 已废弃
iOS Safari 从 14 开始默认隐藏非 hover 状态下的滚动条，且不再支持 -webkit-overflow-scrolling: touch（设了也无效）。这意味着你在桌面调试看到的滚动条，在 iPhone 上可能完全不可见，哪怕内容可滚动。
目前无标准 CSS 方式强制显示，只能靠用户主动拖动触发短暂显示，或改用自定义滚动条库（如 simplebar）注入可见 thumb 元素。但要注意：自定义滚动条会接管原生滚动事件，可能影响表格内 input 聚焦、focus 流、键盘导航等交互。
- ✅ 测试务必真机验证，模拟器常显示异常
- ✅ 若业务强依赖滚动条可见性（如数据密集型后台），建议降级为「始终显示」的 JS 滚动条方案
- ❌ 不要用
scrollbar-width: thin试图“修复”iOS 隐藏问题——它对 Safari 无效
::-webkit-scrollbar 就只是 CSS 废代码；而有了滚动行为，又得面对 Firefox 和 iOS 的双重缺席**。 
