Bootstrap 的 table-responsive 类需添加在表格父级 div 上而非 table 标签内，通过 overflow-x: auto 实现小屏横向滚动；支持断点变体如 table-responsive-sm 等；配合 text-truncate 或 word-wrap 可防内容撑破容器。
用 Bootstrap 的 table-responsive 实现表格横向滚动，核心是给表格容器添加该类，让内部表格在小屏幕上自动出现水平滚动条。它不是直接加在 <table> 上，而是包裹表格的父级元素（如 <code><div>）。
<h3>正确使用 table-responsive 的结构</h3>
<p>Bootstrap 要求把 <code><table> 放在一个带有 <code>table-responsive 类的 <div> 里。这样，当表格宽度超出容器时，该 <code><div> 会启用 <code>overflow-x: auto，从而支持横向滑动。
- ✅ 正确写法：
<div class="table-responsive"><table>...</table></div> - ❌ 错误写法：直接给
<table class="table-responsive"> —— 这个类对 <code><table> 无效 <li>默认只在视口宽度 sm 断点以下）才启用滚动；如需始终启用，可配合 <code>table-responsive-sm或自定义类 -
table-responsive：仅在xs（ -
table-responsive-sm：从sm（≥576px）开始生效 -
table-responsive-md：从md（≥768px）开始生效 -
table-responsive-lg：从lg（≥992px）开始生效 - 例如：希望平板及以上也支持滚动，就用
table-responsive-md - 给
<td> 或 <code><th> 加 <code>text-truncate截断并显示省略号 - 对长文本列设置
max-width: 200px; word-wrap: break-word;（CSS） - 避免在表格中嵌入宽图或未约束的
<iframe></iframe>等元素 - 使用
table-sm缩小内边距，为窄屏节省空间 - 给
.table-responsive添加如下样式可美化滚动条：
适配不同屏幕尺寸的响应式类
Bootstrap 提供了带断点的变体，控制在什么屏幕宽度下开启滚动：
确保表格内容不撑破容器
即使加了 table-responsive，如果单元格内容过长（如无空格长字符串、未换行文本），仍可能导致滚动失效或布局异常：
立即学习“前端免费学习笔记（深入）”；
自定义滚动样式（可选）
原生滚动条样式简陋，可通过 CSS 微调（尤其在 WebKit 浏览器中）：
