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、单元格内容尺寸等综合得出最小容纳宽度，不再无条件受限于父容器。
因此，当 <col style="width: 3000px; min-width: 3000px;"> 存在时，Chrome 100+ 正确将表格渲染为约 3000px 宽（配合外层 div[overflow-x:auto] 实现水平滚动），而 Chrome 80 则将其压缩至父 div 的 100% 宽度，导致列宽失效、内容被裁剪。
✅ 推荐解决方案：显式使用 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 < 68），可搭配 JavaScript 动态计算宽度，但本例中因明确限定为 Chrome 80+ 场景，无需降级处理；
- 避免混用 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 的尺寸声明，并在超出视口时正确启用水平滚动。
