Chrome 80 及更早版本中，table { width: auto } 会强制将表格宽度限制在父容器 100% 内；而 Chrome 100+ 遵循更标准的 max-content 计算逻辑，允许表格突破父宽。本文详解该兼容性差异的根源，并提供稳定、跨浏览器的解决方法。
chrome 80 及更早版本中，`table { width: auto }` 会强制将表格宽度限制在父容器 100% 内；而 chrome 100+ 遵循更标准的 `max-content` 计算逻辑，允许表格突破父宽。本文详解该兼容性差异的根源，并提供稳定、跨浏览器的解决方法。
这一行为变化源于 Chromium 对 CSS 表格布局算法的持续标准化演进。在 Chrome 80 及之前，width: auto 在表格上被实现为“收缩至父容器可用宽度”，本质上等效于 width: 100%（受 overflow-x: auto 约束时仍被截断）。而自 Chrome 100 起，Chromium 同步了 Firefox 和 Safari 的行为：width: auto 在表格上默认采用 max-content 内在宽度计算逻辑——即依据 col、colgroup 中显式设置的 width/min-width、单元格内容尺寸等综合得出最小容纳宽度，不再无条件受限于父容器。
因此，当
✅ 推荐解决方案：显式使用 width: max-content
<div style="overflow-x: auto;"> <table style="width: max-content;"> <!-- ✅ 替代 width: auto --><colgroup><col style="width: 3000px; min-width: 3000px;"></colgroup> <thead><tr><th style="background-color: red; color: black;">1</th></tr></thead> <tbody><tr><td style="background-color: red; color: black;">1</td></tr></tbody> </table> </div>
⚠️ 注意事项：
- max-content 是现代 CSS 标准属性，Chrome 68+、Firefox 66+、Safari 14.1+ 均原生支持，完全覆盖 Chrome 80+ 场景；
- 若需兼容极老浏览器（如 IE 或 Chrome
- 避免混用 width: auto 与固定 col 宽度——语义冲突易引发不可预测布局，max-content 才是表达“按列定义撑开”的正确语义；
- 外层 div[overflow-x: auto] 必须存在且未设置 width 限制（或设为 width: fit-content / inline-block），否则滚动条无法触发。
? 总结：这不是 Bug，而是浏览器对 CSS 规范（特别是 CSS Sizing Level 3）的逐步对齐。将 width: auto 显式替换为 width: max-content，即可统一各现代浏览器行为，确保表格严格遵循 colgroup 的尺寸声明，并在超出视口时正确启用水平滚动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
