table-layout: fixed使width声明“失效”是因为它仅在基准阶段读取第一行th/td或col的width作为列宽轨道，后续单元格的width样式被忽略；col的width优先级最高，推荐使用col元素显式定义列宽。
table-layout: fixed 为什么让 width 声明“失效”
不是 width 没起作用，而是它只在“基准阶段”生效：浏览器只读取第一行 <th>/<td> 或 <col> 的 width 值作为列宽轨道，后续所有单元格的 width 样式会被忽略。哪怕你给第 5 行第 2 列的 <td> 写了 width: 500px，它也不会改变该列宽度。
常见错误现象：<td style="width: 100px">xxx</td> 在第二行，但列宽还是被第一行撑开——因为 fixed 模式根本不看它。
-
<col>的width优先级最高，推荐用<col width="120">或<col style="width: 120px"> - 第一行单元格的
width是兜底方案，但受内容最小宽度限制（比如含长 URL 时，min-width可能隐式介入） - 百分比值在
<col>中行为不稳定，Safari 15.4 前对vw支持差，统一用px或%（仅在table有明确width时才可靠）
padding 和 border 怎么算进“100px 宽”里
在 table-layout: fixed 下，width: 100px 指的是内容区（content box）宽度，不是单元格最终占位宽度。默认 box-sizing: content-box，所以 padding: 10px + border: 1px solid 会让实际占位变成约 122px（左右各 +10+1），但列轨道仍按 100px 分配——导致内容被压缩、换行或溢出。
常见错误现象：设了 width: 100px 和 padding: 16px，结果文字挤成一团，甚至看不见左 padding。
立即学习“前端免费学习笔记（深入）”；
- 加
box-sizing: border-box能让width包含padding和border，但注意：box-sizing对<td>本身无效（表格单元格不支持该属性），只能作用于单元格内嵌元素（如<div>） - 更可行的做法：把
padding和border算进设计余量，或用<col>定义净内容宽，再靠内层容器控制视觉留白 -
border-collapse: collapse不影响列宽计算，但会合并边框；border-spacing是额外加在列之间的，不占用单列宽度
为什么第一行空单元格会让列塌缩为 0
Firefox 对空单元格更严格：如果第一行某列是空 <td></td>，且没通过 <col> 或 width 显式声明宽度，该列基准宽度可能直接算作 0，后续所有行都继承这个“0 宽轨道”，内容全被压扁或溢出。
常见错误现象：表格渲染后某列完全看不见，检查发现第一行对应 <td> 是空的，也没写 width。
- 永远不要依赖第一行内容来定义列宽，尤其当数据可能为空时
- 用
<col>显式声明所有列宽，哪怕只是<col>（等价于width: auto，表示均分剩余空间） - 避免在第一行使用
colspan，它会让该单元格宽度参与列轨道计算，但无法映射到后续单列，极易错位 - IE8– 不支持
max-width/min-width在<col>上，只能靠 JS 或首行单元格样式兜底
text-overflow: ellipsis 为什么在 td 里不生效
因为 text-overflow: ellipsis 要求三个条件同时满足：overflow: hidden、white-space: nowrap、width（或 max-width）有确定值。但在 table-layout: fixed 下，<td> 的 width 不是独立生效的——它由列轨道决定，而 <td> 自身的 width 声明又被忽略，所以常缺最后一个条件。
常见错误现象：写了 text-overflow: ellipsis，但文字照常溢出或换行，没出现省略号。
- 解决方案：把文本包进一个
<div>，给它设width: 100%、overflow: hidden、white-space: nowrap、text-overflow: ellipsis - 别指望
<td>直接支持ellipsis，它的盒模型逻辑和普通块级元素不同 - 若需多行省略，CSS 无原生方案，得用
display: -webkit-box+-webkit-line-clamp（仅 WebKit），或 JS 截断
真正难的不是写对 table-layout: fixed，而是意识到它把“列宽决定权”从内容层上移到了结构层——一旦漏掉 <col> 或第一行宽度声明，整个表格就失去锚点，后面所有样式都会漂移。很多问题表面是 CSS 写错了，其实是布局前提没立住。
