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"> 只影响首行对应列，第二行同列的 <code>td 宽度仍由内容撑开；长文本（比如无空格 URL）会直接突破设定值，导致横向滚动或列宽变形。

真正能锁定某一列像素宽度的写法

必须同时满足三个条件：

• table 元素有明确的 width（如 width: 600px 或 width: 100%）
• table 设置 table-layout: fixed
• 在 <table> 开始后、<code><thead> 前插入 <code><colgroup> <col width="120"> <col> </colgroup>（<col> 顺序必须和列一一对应）

  例如想让第一列死死卡在 120px，其余两列均分剩余空间：

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  ID	Name	Email
  12345	Alice	alice@example.com

  固定列宽后，内容溢出怎么处理

  设了 <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></colgroup> 的位置和 table-layout: fixed 的绑定关系：少一个，列宽就不可控；<col> 写进 <thead> 里，等于没写；父容器是 <code>display: flex，还得额外加 min-width: 0 才能压得住。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！