表格滚动需用容器控制：外层.table-responsive保水平滚动，内层div设max-height和overflow-y:auto实现垂直滚动；直接给table设overflow无效，且避免破坏其display和样式继承。
表格内容溢出时滚动条不出现？检查容器高度和 overflow 设置
bootstrap 表格本身不自动触发滚动，关键在父容器。默认 <table> 是内联流式元素，不会限制尺寸，必须用带明确高度/最大高度的容器包裹，并设置 overflow-x: auto 和/或 overflow-y: auto。
常见错误是直接给 <table> 加 style="max-height: 300px; overflow: auto;" —— 没用，<table> 不响应 overflow，只对块级可溢出容器生效。
- 用
<div class="table-responsive">包裹整个<table>（Bootstrap 4+ 内置类） - 若需同时控制垂直滚动，额外加
max-height并设overflow-y: auto - 注意：Bootstrap 的
.table-responsive默认只处理水平滚动（overflow-x: auto），垂直方向需手动干预
Bootstrap 5 中如何让 table 同时支持横向和纵向滚动
Bootstrap 5 的 .table-responsive 仍只管水平，要加垂直滚动，得嵌套一层有高度限制的容器。
推荐结构：<div class="table-responsive"><div style="max-height: 400px; overflow-y: auto;"><table class="table">...</table></div></div>。这样外层保水平滚动，内层控垂直滚动。
-
.table-responsive必须包裹最外层，否则小屏下table会换行错乱 - 内层
div的max-height值要大于表头高度，否则表头可能被截断 - 避免对
<table>直接设display: block—— 会破坏 Bootstrap 表格的样式继承（如斑马纹、hover 效果）
固定表头 + 可滚动内容？别用 position: sticky 在 tbody 上
想滚动时表头不动，很多人试 thead th { position: sticky; top: 0; }，但实际在 Bootstrap 表格中容易失效，尤其配合 .table-responsive 时。
根本原因是：Bootstrap 的 .table-responsive 生成的是 display: block 容器，而 position: sticky 要求最近的块级祖先有明确高度且不能是 overflow: hidden（而 .table-responsive 默认是 overflow: visible，但内部机制干扰了 sticky 行为）。
- 稳妥做法：去掉
.table-responsive，改用自定义容器 +overflow: auto，再对thead单独加position: sticky - 确保
thead的background-color显式设置，否则滚动时文字可能透底 - 移动端 Safari 对
sticky支持不稳定，测试时务必真机验证
滚动后边框/阴影错位？检查 box-sizing 和 border-collapse
加了滚动容器后，有时表格外边框断开、阴影偏移，或列宽不一致，大概率是 border-collapse: collapse 和容器 box-sizing 冲突导致。
Bootstrap 默认表格用 border-collapse: collapse，但一旦外层容器设了 padding 或 border，又没重置 box-sizing，视觉上就会“错位”。
- 给滚动容器（即
.table-responsive或自定义div）加上box-sizing: border-box - 如果用了
table.table-bordered，确保th/td的border和容器border不重复叠加 - 避免在
table上设margin—— 容易被滚动容器裁剪，改用容器的padding
复杂点在于：滚动行为本质是 CSS 渲染层的事，和 Bootstrap 类名只是耦合关系，不是魔法。真正起作用的是容器尺寸、溢出策略、以及是否破坏了表格的渲染上下文。调的时候盯着 DevTools 里 computed styles 看 overflow 和 height 就行。
