HTML中无法单独固定单元格大小，必须通过table-layout: fixed、明确table宽度及colgroup中col元素协同控制列宽；内容溢出需用overflow:hidden等CSS处理。
HTML里没有“固定某一个单元格大小”这种独立操作——单元格（td或th）的尺寸由整列宽度决定，不是单个控制的。真正可控的是列宽，而列宽必须靠整套机制协同生效。
为什么直接给 td 设 width 不起作用
浏览器默认用 table-layout: auto，它先按所有行内容算出每列自然宽度，再缩放整张表去匹配你写的 table { width }。这时：td { width: 150px } 被忽略；<td width="150"> 只影响首行对应列，第二行同列的 td 宽度仍由内容撑开；长文本（比如无空格 URL）会直接突破设定值，导致横向滚动或列宽变形。
真正能锁定某一列像素宽度的写法
必须同时满足三个条件：
-
table元素有明确的width（如width: 600px或width: 100%） -
table设置table-layout: fixed - 在
<table>开始后、<thead>前插入<colgroup><col width="120"><col></colgroup>（<col>顺序必须和列一一对应）
例如想让第一列死死卡在 120px，其余两列均分剩余空间：
立即学习“前端免费学习笔记（深入）”；
<table style="width: 600px; table-layout: fixed;">
<colgroup>
<col width="120">
<col>
<col>
</colgroup>
<thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead>
<tbody><tr><td>12345</td><td>Alice</td><td>alice@example.com</td></tr></tbody>
</table>
固定列宽后，内容溢出怎么处理
设了 <col width="120"> 只是分配了空间，不处理内容就会撑破或换行失真。单行截断需加：
td, th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }- 避免用
word-break: break-all——中文会在字中间硬切，体验差；优先用overflow-wrap: break-word（对英文/URL 更友好） - 如果列里要放图片，记得给
img加max-width: 100%; height: auto;，否则图片会撑开列宽
最容易被漏掉的是 <colgroup> 的位置和 table-layout: fixed 的绑定关系：少一个，列宽就不可控；<col> 写进 <thead> 里，等于没写；父容器是 display: flex，还得额外加 min-width: 0 才能压得住。
