直接给 table 加 overflow-x: auto 无效，必须用外层容器包裹并设 overflow-x: auto、width: 100%，同时 table 本身需设 table-layout: fixed、width: 100%、min-width: 0，并通过 col 或首行 tr 显式定义列宽，否则表格仍会撑破父容器且不触发滚动。
直接给 table 加 overflow-x: auto 无效，必须用外层容器包裹并配合 table-layout: fixed 和 min-width: 0 等关键约束 —— 否则表格仍会撑破父容器，滚动条不出现。
为什么 flex 容器里的 table 一定会溢出？
Flex 子项默认 min-width: auto，而 table 是替换元素（replaced element），其固有宽度由内容决定，浏览器拒绝压缩它，哪怕父容器只有 320px。此时 flex-shrink: 1 形同虚设，width: 100% 也无效 —— 表格无视该声明。
-
table不参与 flex 主轴尺寸分配，只当一个“黑盒”渲染 - 即使父容器设了
overflow-x: auto，但table自身没被限制宽度，浏览器判定“无溢出”，滚动条不会触发 - Bootstrap 的
.table-responsive失效，往往是因为它被嵌在display: flex或overflow: hidden的父级里，导致内部overflow-x: auto被截断
正确包裹方式：外层 div + table-layout: fixed
必须打断表格默认的“自适应列宽”行为，让宽度可控。核心是两层控制：容器负责滚动，table 负责收敛。
- 外层容器（如
<div class="table-wrapper">）设：overflow-x: auto、width: 100%、-webkit-overflow-scrolling: touch（iOS 必加） -
table元素本身设：table-layout: fixed、width: 100%、min-width: 0（关键！解锁 flex 收缩能力） - 第一行
tr或显式<col>标签定义列宽，例如：<col style="width: 20%"><col style="width: 30%">；否则列宽由首行内容撑开，table-layout: fixed不生效 - 避免在
table上写white-space: nowrap，它会让长文本单行撑宽；需要时只加在特定td上，并配text-overflow: ellipsis
Flex 子项中 table 仍溢出？检查这三处
即使套了容器，常见漏点会让整个方案失效：
立即学习“前端免费学习笔记（深入）”；
- 父级 Flex 容器是否写了
flex-shrink: 0或min-width: fit-content？这些会锁死子项宽度，必须改成min-width: 0 -
table的祖先元素是否有overflow: hidden？比如某个中间div是display: flex且未设flex-shrink: 0，它会截断子级的overflow-x - 是否用了第三方 UI 库（如 Ant Design、Element Plus）？它们可能重置了
box-sizing或对table加了display: inline-table，需用 DevTools 查看 Computed 值确认table-layout和min-width是否真正生效
窄屏下比滚动更可靠的降级方案
横向滚动只是“能看”，不是“好读”。当列数 ≥ 5 或表头语义强时，优先考虑卡片化重构：
- 每行
tr设display: block，每个td设display: block+position: relative -
td::before { content: attr(data-label); }，data-label必须写在td上（不能只靠th），值要业务明确（如data-label="创建时间"） -
thead必须display: none或position: absolute; top: -9999px，否则它仍在流式布局中占位，破坏垂直堆叠 - 大屏恢复时，所有样式链（
tr,td,th）必须同步重置为table-row/table-cell，漏一层就错乱
最易被忽略的是 min-width: 0 的作用对象 —— 它必须加在 table 元素自身上，而不是外层容器或 tr；且若 table 被包在另一个 Flex 子项里（比如 div > table），那个 div 也得加 min-width: 0，否则它先撑开了，table 根本没机会收缩。
