table-layout: fixed 会彻底绕过标准盒模型计算，切换至表格专属布局上下文，width、padding、border、margin 作用逻辑全部重写，box-sizing 基本失效；其列宽仅由 或首行 th/td 的 width 决定，后续行同列 td 的 width 被忽略。

table-layout: fixed 会彻底绕过标准盒模型计算

它不是“调整”盒模型，而是切换到表格专属布局上下文——width、padding、border、margin 的作用逻辑全部重写。标准盒模型中 box-sizing 控制的“width 包不包含 padding 和 border”，在这里基本失效，因为单元格最终宽度不由单个元素的 width 决定，而由整行列宽分配算法拍板。

为什么给 td 设 width: 100px 在 table-layout: fixed 下可能无效

关键点在于：只有第一行的 th 或 td 上设置的 width，或 <col> 元素定义的宽度，才会被 fixed 算法采纳为列宽依据；后续行同列的 td 即使写了 width，也会被忽略。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• <col width="120"> 最可靠：渲染前就参与列轨道计算，不受内容、min-width 或样式优先级干扰
• 首行 <th style="width: 120px"> 可用，但长单词或 <code>colspan 容易导致错位
• 仅对第二行及以后的 td 加 width —— 完全没用，浏览器静默丢弃

内容溢出时，padding 和 border 仍生效，但不参与列宽分配

padding 会影响单元格内部内容的位置和换行行为，border 会影响视觉边界，但它们不会让列变宽——fixed 布局下，列宽在内容绘制前就已锁定。

• border-collapse: collapse 会让相邻边框合并，此时 border 宽度不叠加，box-sizing 失去意义
• 若 td 内容超长，默认不折行；需显式加 white-space: normal 或 word-break: break-all
• text-overflow: ellipsis 要生效，必须同时满足：display: block（或 inline-block）、max-width、父 table 有定宽

<col> 的单位选择直接影响响应式表现

<col> 不支持 fr 单位，只认 px、% 和无单位数值（按比例分配）。百分比需要 <table> 本身有明确宽度（如 <code>width: 100%）才可预测；px 最稳，尤其适合固定操作列或图标列。

• 写 <col width="20%"> 前，确保 <table style="width: 100%"> 已存在 <li>避免混用 <code>px 和 %：比如 <col width="120"> <col width="30%">，第二列宽度将不可控
• 响应式场景下，建议外层用 overflow-x: auto 包裹 <table>，而非强行压缩列宽 实际中最容易被忽略的是：你改了 <code>td 的样式，却忘了检查 <col> 是否存在、<table> 是否设了 <code>width、以及是否误把 width 加在了非首行单元格上——这三处任一缺失，table-layout: fixed 就只是个空壳。

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