table-layout: fixed 本身不强制列宽，真正“锁住”列宽需同时满足三条件：table 显式 width、col 或首行 th/td 的 width 声明、以及 word-break/overflow-wrap 等文本控制；缺一即失效，内容仍会撑破。

table-layout: fixed 本身不强制列宽，它只是切换布局算法——真正“锁住”列宽的，是你提供的宽度依据。没给宽度，它就退回去均分，内容一长照样撑开。

Wechat HTML Publisher

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

下载

为什么写了 table-layout: fixed 还是被内容撑开？

浏览器只认三样东西作为列宽来源：<col>、第一行 <th>/<code><td> 的 <code>width（HTML 属性或内联 style），以及 table 自身的 width。缺任何一项，fixed 就形同虚设。

• table 没设 width（比如只写了 table-layout: fixed）→ 浏览器无基准可依，退为“尽量等分”，结果仍受内容影响
• <col> 写在 <thead> 里面（正确位置是 <code><table> 开始标签后、<code><thead> 前）→ 被忽略 <li>只给第二行 <code><td width="200"> → <code>fixed 模式下只读第一行，这行无效
• 用 fr 或 auto 单位写在 <col> 上（如 <col width="1fr">）→ 不被支持，IE 和现代浏览器都无视

怎么用 <col> 真正控住每一列？

<col> 是优先级最高、语义最干净、且不依赖渲染顺序的列宽定义方式。它必须直接作为 <table> 的子元素，不能嵌套在 <code><thead> 或 <code><tbody> 里。 <ul> <li> <code>table 必须有明确 width，比如 width: 100% 或 width: 800px

• <col> 放在 <thead> 之前，例如：<code><table style="width:100%;table-layout:fixed"> <col width="120"> <col> <col width="80"> <thead>...</thead> <li>没设 <code>width 的 <col> 会均分剩余空间（不是按内容长度），所以三列写成 <col width="120"> <col width="1fr"> 是无效的
• 跨浏览器稳妥写法：同时写 <col width="150"> 和第一行 <th width="150">，尤其要兼容 IE8–11 <h3> <code>td 里文字还是撑破列宽怎么办？

  table-layout: fixed 只管“把这一列切多宽”，不管里面文字怎么排。溢出行为完全由你后续控制，加了 word-break 或 overflow-wrap 才算闭环。

  立即学习“前端免费学习笔记（深入）”；

  • 属性必须加在 <td> 或 <code><th> 上，加在 <code><tr> 或 <code><table> 上无效 <li> <code>word-break: break-all：适合 ID、哈希、纯数字字段，在任意字符间断（包括中文汉字之间），效果生硬
  • overflow-wrap: break-word：更友好，只在单词边界换行，对中英文混合更稳妥
  • 想单行省略号？得额外加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

  Safari 下 table-layout: fixed 不生效的隐藏坑

  不是 CSS 写错了，而是父容器干扰了 table 渲染流程。

  • 检查外层是否用了 display: inline-block → 换成 display: block 或直接去掉
  • 避免把 <table> 放进 <code>display: flex 的子项里 → flex 容器会覆盖 table 的内部布局逻辑
  • 真遇到 Safari 忽略设置，试试给 <table> 加一句 <code>min-width: 0，有时能破局

    真正难的不是写 table-layout: fixed，而是确保宽度来源可靠、文本行为可控、父容器不捣乱——这三个点漏掉任何一个，都会让列宽“看起来没锁住”。