td:first-child { width: 120px } 不生效，是因为 table 默认使用 table-layout: auto，浏览器优先按内容计算列宽，该选择器仅设置单元格建议宽度，不改变列级布局基准；真正锁定首列像素宽度必须用 <colgroup><col width="120px">，且需配合 table-layout: fixed 和显式 table 宽度。
为什么直接写 td:first-child { width: 120px } 不生效？
浏览器默认用 table-layout: auto，它先按内容算列宽，再缩放整张表。你给第一行某个 td 设宽度，只影响那一格的“建议宽度”，后续行照样被长文本撑开；更糟的是，td:first-child 选择器在 auto 模式下根本不会强制约束列宽——它只是给单元格盒模型设宽，不改变列级布局基准。
-
table没设width（比如width: 100%或width: 800px），table-layout: fixed就没参照系 -
<col>没写，或写在<thead> 里面（必须是 <code><table> 的直接子元素，且在 <code><thead> 前） <li>用了废弃的 <code><col width="120">，现代浏览器忽略，得用<col style="width: 120px"> -
<colgroup></colgroup>必须紧贴<table> 开始后、<code><thead> 前 <li>第一个 <code><col>对应首列，写<col style="width: 120px"> - 后续
<col>可留空（均分剩余空间）或设具体值，数量必须和实际列数一致 - 所有
<col>宽度加起来超过table总宽？浏览器会等比缩小，不会留白也不会截断
col 是唯一能真正锁定首列像素宽度的方式
<col> 是语义上专为列级控制设计的元素，优先级高于任何单元格上的 width 或 CSS width 声明，且不依赖渲染顺序。要固定首列，必须用它，并确保结构正确：
示例最小可行结构：
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 120px">
<col>
<col>
</colgroup>
<thead><tr><th>ID</th><th>名称</th><th>状态</th></tr></thead>
<tbody><tr><td>1</td><td>商品A</td><td>上架</td></tr></tbody>
</table>首列固定后，长文本仍溢出怎么办？
table-layout: fixed 锁住了列宽，但不处理单元格内文本行为。如果内容是一长串无空格字符串（比如 URL、base64 片段），它会直接突破边界，导致横向滚动或撑破布局。
立即学习“前端免费学习笔记（深入）”；
- 给
td和th加white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 若需换行，改用
word-break: break-all或overflow-wrap: break-word（注意：后者对无空格长串支持有限） - 别漏掉
th—— 表头也得统一控制，否则首行表头和下面数据列视觉错位
常见组合：td, th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
移动端或响应式场景下，120px 很可能不合适
固定像素值在小屏上极易触发横向滚动，用户得拖拽才能看全，体验极差。这不是 bug，是设计选择失误。
- 优先用百分比：
<col style="width: 20%">，但确保所有列百分比总和 ≤ 100%，否则必然溢出 - 或用
min-width+width: auto组合，让首列至少 80px，其余自适应 - 更稳妥的做法：媒体查询里关掉
table-layout: fixed，改用display: block把表格转成卡片流，首列变成标题行
复杂点在于：列宽控制和文本截断必须同步生效，缺一不可；而最容易被忽略的，是 <col> 的位置和 table 的 width 是否真实存在——这两项任意缺失，整个固定逻辑就退化回默认自动布局。
