紧凑型表格需通过 table-layout: fixed、合理列宽定义和内容换行协同实现，而非单纯缩字体删边距；必须设置 width: 100% 且外层包裹可滚动容器，才能确保响应式紧凑效果。
紧凑型表格不是靠删边距、缩字体硬压出来的，而是通过控制布局算法、内容换行和容器约束三者协同实现的。盲目设置 padding: 0 或 font-size: 12px 往往导致可读性崩坏、窄屏溢出或辅助技术失效。
必须启用 table-layout: fixed
这是紧凑布局的前提，否则所有宽度控制都形同虚设。默认 auto 布局会让长文本（如 URL、JSON 字段）直接撑开整列，其他列被压缩到看不见。
- 写法必须是
table { table-layout: fixed; width: 100%; }—— 缺少width在多数浏览器中仍会退回到 auto 行为 - 优先用
<col>定义列宽：<col style="width: 120px"> <col style="width: auto"> <col style="min-width: 80px">，比在th上写width更稳定 - 避免对
td单独设width：在fixed模式下它只是参考值，不保证生效 - IE9–IE11 对
<col>支持弱，可加兜底：<th width="120">姓名</th>
单元格内边距与文本换行要协同控制
紧凑 ≠ 拥挤。真正节省垂直空间的是减少行高，而行高由 padding 和内容是否换行共同决定。
-
td, th { padding: 4px 6px; }是安全下限，再小会导致点击热区不足（尤其移动端） - 防撑宽关键：对可能超长的内容单元格加
white-space: normal; word-break: break-word;，而非nowrap - 若需单行截断，必须四件套齐备：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;（注意是max-width，不是width） - 别给整个
table设white-space: nowrap—— 这会让所有列失去折行能力，窄屏必横向滚动
外层容器比表格自身更关键
很多人在 table 上写 min-width: 480px 却无效，是因为表格宽度受父容器支配，不是自己能说了算。
- 必须包裹一层
<div class="table-wrapper"><table></table></div> -
.table-wrapper { min-width: 480px; overflow-x: auto; }—— 这个min-width才真正兜底，overflow-x: auto比transform: scale(0.9)更可控、不失真 - 避免把
table直接放进display: flex容器：flex 会压缩子项，min-width失效，且table-layout: fixed可能被干扰 -
colspan单元格天然绕过所有列宽约束，尽量不用；非用不可时，放在末尾列或拆成独立行
最易被忽略的一点：紧凑布局的“紧”体现在行高和列宽的确定性上，而不是像素级压缩。一旦你开始调 line-height: 1.1 或 font-size: 11px，大概率说明 table-layout: fixed 没生效，或者内容换行没控住——先查这两处，比调字体更治本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
