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 或自定义类

适配不同屏幕尺寸的响应式类

Bootstrap 提供了带断点的变体，控制在什么屏幕宽度下开启滚动：

• table-responsive：仅在 xs（
• table-responsive-sm：从 sm（≥576px）开始生效
• table-responsive-md：从 md（≥768px）开始生效
• table-responsive-lg：从 lg（≥992px）开始生效
• 例如：希望平板及以上也支持滚动，就用 table-responsive-md

确保表格内容不撑破容器

即使加了 table-responsive，如果单元格内容过长（如无空格长字符串、未换行文本），仍可能导致滚动失效或布局异常：


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 给 <td> 或 <code><th> 加 <code>text-truncate 截断并显示省略号
• 对长文本列设置 max-width: 200px; word-wrap: break-word;（CSS）
• 避免在表格中嵌入宽图或未约束的 <iframe></iframe> 等元素
• 使用 table-sm 缩小内边距，为窄屏节省空间

自定义滚动样式（可选）

原生滚动条样式简陋，可通过 CSS 微调（尤其在 WebKit 浏览器中）：

• 给 .table-responsive 添加如下样式可美化滚动条：