table设min-width/max-width需配合width才生效，因默认table-layout: auto下宽度由内容决定；td的min-width仅在table-layout: fixed时有效；colgroup+col是可靠列宽控制方案。
直接给 table 元素设 min-width 和 max-width 是最简单有效的做法，但必须配合 width 使用，否则在多数浏览器里不会按预期收缩或撑开。
table 元素上设置 min-width / max-width 为什么有时不生效
常见现象是：写了 min-width: 400px，但表格在窄屏下依然被压缩到 200px；或者 max-width: 800px 没拦住内容撑出横向滚动条。
- 根本原因：
table默认是「自动布局」（table-layout: auto），它的宽度行为优先响应内容，min-width/max-width只作用于整个表盒，但不约束内部列宽 -
width缺失时，min-width和max-width失去参照基准——浏览器不知道“最小/最大”相对于什么而言 - 父容器设置了
overflow-x: auto或display: flex，可能干扰table的尺寸计算逻辑
正确写法必须包含显式 width：
table {
width: 100%;
min-width: 400px;
max-width: 800px;
table-layout: auto; /* 这里保持默认即可 */
}
td/th 上的 min-width 为什么经常被忽略
这是前端开发中最常踩的坑：td { min-width: 120px } 在绝大多数情况下根本不起作用。
- 浏览器对单元格宽度的计算优先级是：
width> 内容自然宽度 >min-width，而table-layout: auto下，内容宽度天然压倒min-width - 哪怕你给
th设了min-width，只要它内容短（比如“ID”两个字），整列仍会被压缩 - 嵌套表格、
white-space: nowrap未处理、或父容器有flex布局，都会让min-width彻底失效
真正起效的前提只有一个：table { table-layout: fixed }。此时列宽由首行或 <col> 定义，min-width 才能作为底线约束：
table {
table-layout: fixed;
width: 100%;
}
td:nth-child(2) {
min-width: 150px;
}
用 colgroup + col 实现可靠列宽控制
如果需要精确控制每列最小/最大宽度，<colgroup></colgroup> 是语义清晰、兼容性好、且不受内容干扰的方案。
-
<col>必须紧贴<table> 开始后、<code><thead> 之前，顺序错一位就全乱<li> <code>width支持像素（<col width="120">）、百分比（<col style="width: 20%">），但不支持min-width/max-width属性 - 想实现“最小 100px，最多占 30%”，只能靠 CSS 组合：
<col style="width: 30%">+td { min-width: 100px }+table { table-layout: fixed } - 百分比总和超过 100% 会触发横向滚动条，务必校验
示例（三列：固定像素 + 百分比 + 弹性剩余）：
| A | B | C |
响应式场景下 min-width/max-width 的实际取舍
移动端或弹性布局中，硬写像素值的 min-width 很容易导致横向溢出或文字换行异常。
- 优先用相对单位：
min-width: 20rem比min-width: 200px更适应字体缩放 - 长文本单元格必须加截断保护：
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }，否则min-width会被撑破 -
max-width对整表有效，但对单列无效——想限制某列最大宽度，只能靠col+table-layout: fixed+width组合 - IE11 及更老版本不支持
max-width在table上生效，需降级为width+ 媒体查询
复杂点在于：表格宽度控制从来不是单点问题，而是 table-layout、width、col、td 样式四者联动的结果。漏掉任意一环，min-width 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
