table-responsive 仅在小屏（max-width: 767.98px）触发滚动条，因其依赖媒体查询控制 overflow-x: auto；桌面端无该样式，故无滚动条，属正常设计。
为什么 table-responsive 在小屏下才触发滚动条
因为 Bootstrap 的 table-responsive 类默认只在 max-width: 767.98px（即 sm 断点以下）启用横向滚动容器。它不是“让表格变可滚动”，而是“在小屏时才套一层带 overflow-x: auto 的 div”。桌面端直接放行，不加包裹，自然没滚动条。
常见错误现象：table-responsive 加了但桌面没滚动条、手机才有——这恰恰是设计如此，不是 bug。
- BS4/BS5 行为一致，断点逻辑没变
- 如果你需要「所有尺寸都可横向滚动」，得手动给父容器加
overflow-x: auto，别依赖table-responsive -
table-responsive内部是display: block+width: 100%，不会撑开父容器，但会截断子元素溢出
为什么加了 table-responsive 还是换行不滚动
核心问题：表格内容自己先折行了，根本没机会溢出。Bootstrap 不控制单元格内文本是否换行，table-responsive 只管“容器是否允许滚动”，不管“内容是否愿意撑宽”。
典型表现：小屏下文字挤成多行、列宽被压扁、甚至重叠，但横向滚动条就是不出现。
- 必须配合
text-nowrap（或自定义white-space: nowrap）禁用换行 -
.table默认有word-wrap: break-word，会主动拆分长单词，需覆盖 - 避免在
th/td里用flex或display: table-cell等干扰原生表格渲染的行为
为什么桌面端加了 table-responsive 也没滚动条
因为 table-responsive 的 CSS 规则是媒体查询驱动的，桌面端样式表里压根没定义 overflow-x。查 DevTools 会发现：桌面下该 class 就是个空壳。
想全局生效，有两个轻量方案：
- 直接给表格父容器加内联样式：
<div style="overflow-x: auto;"><table class="table">...</table></div> - 写一条覆盖规则：
.table-responsive-always { overflow-x: auto; }，然后替换 class - 注意：不要对
<table> 本身设 <code>overflow，无效；必须作用于块级父容器容易被忽略的嵌套陷阱：row 和 container 错位导致意外滚动
这不是表格专属问题，但常和表格混用时一起爆发。比如把
<div class="row"> 直接塞进 <code><div class="table-responsive">，而外层又没 <code>container包裹——row的margin-left: -15px会拖出负空间，触发父容器横向溢出，滚动条就来了，跟表格内容完全无关。- 检查结构是否符合 Bootstrap 嵌套规范：
container→row→col -
table-responsive应作为独立区块使用，别和row混在同一层级 - 用 DevTools 选中滚动条所在容器，看 computed
width和overflow，再往上逐层看 margin/padding 是否异常
- 检查结构是否符合 Bootstrap 嵌套规范：
