直接写 td:first-child { width: 120px } 不生效，因 table-layout: auto 下浏览器按内容计算自然宽度，td 宽度无法约束整列；可靠方案是配合 table-layout: fixed、显式 table 宽度及 元素设置列宽。
为什么直接写 td:first-child { width: 120px } 不生效
因为浏览器默认用 table-layout: auto，它先扫描所有单元格内容算出“自然宽度”，再缩放整张表去适配容器。td:first-child { width: 120px } 只给第一个单元格盒模型设宽，不改变列级基准——第二行一个长 URL 就能把第一列撑开，完全失控。
<col> 必须配合 table-layout: fixed 和显式 width
真正锁定第一列的唯一可靠方式是用 <col>，但它不是“写了就起作用”。三个条件缺一不可：
<table> 上必须有 <code>style="table-layout: fixed; width: 100%"（或具体像素值，如width: 800px）-
<colgroup></colgroup>必须是<table> 的直接子元素，且严格位于 <code><thead> 或第一行 <code><tr> 之前<li>第一列对应 <code><col style="width: 120px">，其余列用空<col>即可均分剩余空间 - 列数必须和
<col>数量严格一致——动态列数得用 JS 插入对应数量的<col> - 如果用了百分比（比如
width: 33.33%），三列之和必须严格等于 100%，浮点误差会导致最后一列被压缩或溢出 -
<col>不支持fr单位，width: 1fr是无效写法，别抄 Grid 的语法 - 内容无空格（如长 URL、Base64 字符串）会撑破列宽，必须额外加
word-break: break-word或overflow: hidden控制
漏掉任意一条，<col> 都会被忽略。比如只加 table-layout: fixed 但没设 width，浏览器会 fallback 到“均分 100%”，而这个 100% 没参照系，结果还是飘。
多列均分时容易踩的坑
均分不是靠猜，而是靠计算和结构约束：
完整最小可行结构示例
| ID | 名称 | 状态 |
|---|---|---|
| 1 | 商品A | 上架 |
注意：这里第二、三列用空 <col>，它们会均分 100% - 120px 的剩余空间；如果父容器是 flex 容器，确保它给了明确宽度（比如 min-width: 600px），否则 width: 100% 会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
