直接给加overflow-x: auto无效，因其是独立格式化上下文且列宽由内容驱动；正确做法是用带明确宽度的外层容器包裹，并设table-layout: fixed配合列宽控制。
直接给 <table> 加 <code>overflow-x: auto 无效——它根本不会触发滚动条，表格照旧撑破视口。真正起效的解法，是用带明确宽度限制的外层容器包裹，并配合 table-layout: fixed 打断表格默认的“内容驱动列宽”行为。
为什么 overflow-x: auto 加在 <table> 上没用
<p>表格是独立格式化上下文，<code><td> 默认按内容撑开列宽，即使父容器只有 320px，整个 <code><table> 仍被当成一个不可分割的整体渲染，浏览器压根不认为它“溢出”。<code>overflow-x 失去作用对象，自然不显示滚动条。
-
overflow-x: auto 必须加在外层 <div class="table-container"> 上，不能直接写在 <code><table>
<li>该外层容器必须有明确宽度约束，比如 <code>width: 100% 或 max-width: 800px，否则滚动机制不触发
- 若用了 Bootstrap 等框架，检查是否被
width: 100% 覆盖了 table-layout: fixed 的效果，需手动重置
必须设置 table-layout: fixed 才能控制列宽
这是让表格响应式可预测的关键开关。它让浏览器放弃扫描全部内容来算列宽，转而依赖第一行 <tr> 或 <code><col> 的显式宽度声明，从而避免某列因长文本或图片被意外顶宽。
- 在
<table> 上设 <code>table-layout: fixed，再配合 width: 100%
- 为列指定宽度：可用
<col width="20%">，或在第一行 <th> 上设 <code>width（注意 IE 兼容性）
- 避免只靠
white-space: nowrap 强撑——它会让文字挤成一团，应配合 word-break: break-word 或 text-overflow: ellipsis
小屏下横向滚动体验差？优先降级为卡片布局
滚动只是“能看”，不是“好读”。表头与数据脱节、屏幕阅读器无法关联语义、用户甚至不知道要滑——这些都比溢出本身更致命。
立即学习“前端免费学习笔记（深入）”；
- 窄屏媒体查询中，把
tr 设为 display: block，td 也设为 display: block
- 每个
<td> 必须带 <code>data-label="姓名" 这类业务明确的属性，不能只靠 <th> 存语义
<li>用 <code>td::before { content: attr(data-label); } 把表头变成每项前缀，thead 要设 display: none 或绝对定位移出流
- iOS Safari 滚动卡顿？仅对真正需要横向滚动的容器加
-webkit-overflow-scrolling: touch，别全局滥用
最易被忽略的一点：很多溢出其实来自表单控件（如 <input>、<select></select>）的固有宽度，它们默认不随 <td> 缩放。必须统一加 <code>width: 100% 并设 box-sizing: border-box，否则再好的表格结构也会在手机上破框。
overflow-x: auto 必须加在外层 <div class="table-container"> 上，不能直接写在 <code><table>
<li>该外层容器必须有明确宽度约束，比如 <code>width: 100% 或 max-width: 800px，否则滚动机制不触发width: 100% 覆盖了 table-layout: fixed 的效果，需手动重置必须设置 table-layout: fixed 才能控制列宽
这是让表格响应式可预测的关键开关。它让浏览器放弃扫描全部内容来算列宽，转而依赖第一行 <tr> 或 <code><col> 的显式宽度声明，从而避免某列因长文本或图片被意外顶宽。
- 在
<table> 上设 <code>table-layout: fixed，再配合width: 100% - 为列指定宽度：可用
<col width="20%">，或在第一行<th> 上设 <code>width（注意 IE 兼容性） - 避免只靠
white-space: nowrap强撑——它会让文字挤成一团，应配合word-break: break-word或text-overflow: ellipsis - 窄屏媒体查询中，把
tr设为display: block，td也设为display: block - 每个
<td> 必须带 <code>data-label="姓名"这类业务明确的属性，不能只靠<th> 存语义 <li>用 <code>td::before { content: attr(data-label); }把表头变成每项前缀，thead要设display: none或绝对定位移出流 - iOS Safari 滚动卡顿？仅对真正需要横向滚动的容器加
-webkit-overflow-scrolling: touch，别全局滥用
小屏下横向滚动体验差？优先降级为卡片布局
滚动只是“能看”，不是“好读”。表头与数据脱节、屏幕阅读器无法关联语义、用户甚至不知道要滑——这些都比溢出本身更致命。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：很多溢出其实来自表单控件（如 <input>、<select></select>）的固有宽度，它们默认不随 <td> 缩放。必须统一加 <code>width: 100% 并设 box-sizing: border-box，否则再好的表格结构也会在手机上破框。
