table-layout: fixed 是硬性前提，因它强制按首行或定义列宽，避免内容撑开；必须直接设于且配合显式width，比更可靠，还需手动处理溢出。

必须用 table-layout: fixed，否则任何 width 设置都可能被内容无视。

为什么 table-layout: fixed 是硬性前提

浏览器默认用 table-layout: auto，它会扫描所有单元格内容（包括长 URL、无空格字符串）再决定列宽。哪怕你给 <td> 写了 <code>width: 100px，只要里面塞进一串 200 字符的 Base64，整列照样被撑开。

table-layout: fixed 改变的是渲染逻辑：它只看第一行 <th>/<code><td> 或 <code><col> 的宽度，后续所有行都严格对齐，内容溢出不会反向影响列宽。

• 该属性不继承，必须直接加在 <table> 元素上 <li>不设 <code>width（如 width: 100% 或具体像素值）时，fixed 行为不可靠，列宽可能坍缩或错乱
• 仅靠 CSS 类名或父容器宽度无法触发 fixed 布局，必须显式声明

<col> 比第一行 <th> 更可靠 <p>很多人在第一行 <code><th> 上写 <code>style="width: 120px"，但实际生效常被 min-width、内容内联样式或表格容器约束覆盖。而 <col> 是语义化定义列轨道的唯一方式，渲染前就已确定。

• 优先用 <colgroup> <col width="120"> <col width="80"> </colgroup>，单位用 px 最稳；百分比在 fixed 下行为不稳定
• 多个 <col> 总宽超过 <table> 宽度时，浏览器会按比例压缩，但不会溢出容器 <li>如果第一行用了 <code>colspan，该单元格的 width 仍参与列宽计算，但容易导致后续列错位，尽量避免

内容溢出必须手动处理

table-layout: fixed 只管列宽，不管内容怎么放。不加控制，文字会隐藏、溢出或强行撑高行高。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 单行文本：用 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
• 多行可换文本：用 word-wrap: break-word; 或 overflow-wrap: break-word;（后者更现代）
• 防长单词撑开：加 word-break: break-all;，但慎用——它会在任意字符处断行，影响可读性
• 图片或 <input> 等元素需额外设 max-width: 100%; height: auto;，否则仍可能撑破

响应式场景下的常见陷阱

固定列宽在小屏下极易横向溢出，但直接删 table-layout: fixed 会让布局彻底失控。

• 最稳妥做法：把 <table> 包在 <code>overflow-x: auto; 的容器里，保证可滚动
• <col> 不支持媒体查询，想动态调列宽得用 JS 切换 width 值，或改用 display: grid
• 隐藏非关键列可用 @media (max-width: 768px) { .hidden-on-mobile { display: none; } }，但记得给对应 <col> 也加类并同步控制
• 别指望 max-content 来“自动适配”列宽——它只是内容宽度估算值，不能替代 fixed + 显式宽度

真正难的不是加那几行 CSS，而是意识到：一旦用了 table-layout: fixed，列宽就完全脱离内容自治，所有宽度决策必须前置、显式、可预测——漏掉 <col>、忘了设 table 宽度、或忽略溢出处理，任一环节出问题，整个表格就“看起来没生效”。

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