直接给<td>或<th>加width属性效果不可靠，仅在table-layout: auto下作参考；真正锁定列宽必须配合table-layout: fixed、<colgroup><col>定义宽度及<table>明确宽度。
直接给 <td> 或 <th> 加 width 属性行不行？
行，但效果不可靠——它只在 table-layout: auto（默认）下起“该列最大宽度参考”作用，浏览器仍会根据内容重算列宽。比如你写 <td width="120">短文本</td>，隔壁单元格有长 URL，整列照样被撑开。
更糟的是：同一列多个 width 值，浏览器取最大那个；没设的单元格则完全听内容指挥。
真正能锁定单个单元格宽度的方法
必须配合 table-layout: fixed + 显式列宽定义，否则 min-width、width 都可能失效：
-
<colgroup>中用<col>定义每列宽度，优先级最高，且语义清晰 - 给
<th>或<td>加 CSSwidth或min-width，但前提是表格已设table-layout: fixed - 避免混用 HTML
width属性和 CSSwidth，CSS 会覆盖属性，但行为不一致（属性值单位只能是像素或百分比，CSS 支持fr、em等）
示例（可靠写法）：
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 80px">
<col style="width: 20%">
<col style="width: 1fr">
</colgroup>
<tr><th>ID</th><th>姓名</th><th>备注</th></tr>
<tr><td>1</td><td>张三</td><td>长期合作</td></tr>
</table>
为什么 min-width 在表格里经常失灵？
因为默认 table-layout: auto 下，浏览器先按内容撑开列，再缩放整个表去适配 width，此时 min-width 被忽略。只有切换到 fixed 模式后，列宽才由你定义的 <col> 或首行单元格的 width 决定，min-width 才能真正阻止压缩。
立即学习“前端免费学习笔记（深入）”；
- 单独设
td { min-width: 150px; }没用，除非表格同时有table-layout: fixed - 想让某列最小 120px、其余自适应？用
<col style="min-width: 120px">—— 但注意：<col>不支持min-width，得退而求其次：设width: 120px+ 后续列用百分比或fr - 响应式场景下，
min-width和媒体查询配合更稳妥，比如小屏时把表格转为块级 + 横向滚动
<colgroup> 的坑：顺序、位置和继承
<colgroup> 必须紧跟 <table> 开始标签之后、<thead> 或第一行 <tr> 之前，否则被浏览器忽略。
-
<col>数量必须和实际列数一致，少写一个，最后一列就回退到自动计算 -
<col>不继承父级字体大小，所以width: 10em是按根元素字体算，不是表格内字体 - 百分比宽度（如
width: 30%）是相对于整个表格宽度，不是父容器 - 别在
<col>上写class或id——它不渲染，JS 无法通过 class 选中，样式只能 inline 或靠选择器如col:nth-child(2)
复杂表格列宽控制，<colgroup> 是最稳的起点，但容易漏掉位置约束和数量校验——手抖删掉一个 <col>，整列布局就崩了。
