表格在小屏幕需滚动查看时，应确保父容器有明确高度且无overflow:hidden，正确使用框架类名（如Bulma的table-container、Tailwind的overflow-x-auto），并为table设display:block及white-space:nowrap等样式适配。
表格在小屏幕上内容超出容器时，需要显示滚动条才能查看完整数据。如果用了 is-scrollable 或 overflow-auto 类但滚动条不出现，通常不是类名写错了，而是被其他 CSS 规则覆盖、父容器限制了尺寸，或表格本身未正确设置布局行为。
检查父容器是否设置了固定高度或溢出隐藏
滚动条能否出现，取决于容器是否满足“内容溢出 + 溢出属性生效”两个条件。常见问题是父元素（比如 div.table-container）设置了 overflow: hidden，或者没有明确高度/最大高度，导致浏览器无法判断何时该触发滚动。
- 确保包裹表格的容器有明确的
max-height（如max-height: 400px）或height - 避免上级元素存在
overflow: hidden，它会直接裁剪子元素的滚动区域 - Bulma 的
is-scrollable需配合table的父容器使用，不能直接加在<table>标签上
确认类名是否来自对应框架且未拼错
不同框架对滚动容器的类名不同：
– Bulma 使用 table-container + is-scrollable（实际是 table-container 自带滚动，is-scrollable 多用于其他组件）
– Bootstrap 5 推荐用 table-responsive（自动加 overflow-x: auto）
– Tailwind 默认用 overflow-auto 或 overflow-x-auto
- Bulma 正确写法：
<div class="table-container"><table>...</table></div> - Tailwind 正确写法：
<div class="overflow-x-auto"><table>...</table></div> - 手动加
overflow-auto时，必须搭配display: block（因为<table>默认是display: table，不响应 overflow）
强制让表格支持横向滚动
纯 CSS 表格在窄屏下容易因单元格最小宽度（如文字撑开）而无法收缩，导致横向滚动失效。可加以下样式增强兼容性：
- 给
table加display: block和min-width: max-content（让内容决定最小宽度） - 给
th, td加white-space: nowrap防止换行干扰宽度计算 - 必要时用
table-layout: fixed+ 显式设置列宽，避免浏览器自动拉伸
移动端 Safari 滚动条默认隐藏？
iOS Safari 和部分安卓浏览器默认隐藏滚动条，但滚动功能仍可用（拖拽即可）。如果希望显示视觉滚动条，可加：
立即学习“前端免费学习笔记（深入）”；
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
注意：这仅对 WebKit 内核有效，不影响滚动功能本身。
