table-layout: fixed 必须直接作用于元素，列宽仅由或首行单元格的width决定，且需有明确宽度；内容溢出需配合white-space、overflow-wrap等属性控制。
table-layout: fixed 必须直接设在 <table> 上才生效
<p>浏览器不会继承这个属性，写在父容器或用 <code>.my-table table 这类后代选择器也不行。必须是 table { table-layout: fixed; } 这种精确、直接作用于 <table> 元素的声明。如果被更具体的选择器（比如 <code>body .container table）覆盖，或者被 inline style 覆盖，它就失效——列宽立刻退回 auto 模式，内容照撑不误。
列宽基准只能来自 <col> 或第一行 <th>/</th>
<td>
<p>后续所有行的 <code>width 声明都会被忽略，哪怕你给第 5 行的 <td> 写了 <code>width: 200px，它对列宽毫无影响。真正起作用的只有两种方式：
-
<colgroup>
<col width="120">
<col width="30%">
</colgroup> —— 推荐，语义清晰，不影响 HTML 结构
- 第一行每个
<th> 或 <code><td> 显式设置 <code>width（内联或 CSS 类均可）
注意：<table> 自身必须有明确宽度（如 <code>width: 100% 或 width: 800px），否则百分比列宽无计算基准，fixed 行为不可靠。
内容溢出时 white-space 和 overflow-wrap 必须手动配齐
启用 table-layout: fixed 后，<td> 默认是 <code>white-space: nowrap，超长无空格字符串（如 Base64、URL）会横向溢出，甚至拖出滚动条。不能只靠一个属性解决：
- 要换行：加
white-space: normal; + overflow-wrap: break-word;（或 word-break: break-all;）
- 要省略号：需组合
white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + 显式 max-width
- 别依赖
max-width 在 <td> 上生效——旧版 Safari 对它支持差，优先用 <code>width 控制列基准
响应式场景下百分比列宽容易失效的根源
很多人写 th:nth-child(1) { width: 25%; } 却发现列宽乱跳，问题往往不在 CSS 本身，而在父级容器没给定宽。百分比列宽的计算依赖 <table> 的实际渲染宽度，而这个宽度又取决于它的父容器是否设置了 <code>width 或 max-width。常见陷阱包括：
- 父容器是
display: flex 且未设 min-width，导致 <table> 被压缩到内容最小宽度
<li>用了 <code>width: fit-content 或 inline-table，让 <table> 失去宽度上下文
<li>媒体查询里只改字体大小或 padding，却忘了同步调整列宽百分比或 <code><col> 的 width
真正难控的不是写法，而是宽度链路太长：从视口 → 父容器 → <table> → <code><col> → <td> → 文本换行逻辑，任一环缺失或冲突，列宽就脱钩。</td>
<col> 或第一行 <th>/</th>
<td>
<p>后续所有行的 <code>width 声明都会被忽略，哪怕你给第 5 行的 <td> 写了 <code>width: 200px，它对列宽毫无影响。真正起作用的只有两种方式：
-
<colgroup> <col width="120"> <col width="30%"> </colgroup>—— 推荐，语义清晰，不影响 HTML 结构 - 第一行每个
<th> 或 <code><td> 显式设置 <code>width（内联或 CSS 类均可）注意：
<table> 自身必须有明确宽度（如 <code>width: 100%或width: 800px），否则百分比列宽无计算基准，fixed行为不可靠。内容溢出时
white-space和overflow-wrap必须手动配齐启用
table-layout: fixed后，<td> 默认是 <code>white-space: nowrap，超长无空格字符串（如 Base64、URL）会横向溢出，甚至拖出滚动条。不能只靠一个属性解决：- 要换行：加
white-space: normal;+overflow-wrap: break-word;（或word-break: break-all;） - 要省略号：需组合
white-space: nowrap;+overflow: hidden;+text-overflow: ellipsis;+display: block;+ 显式max-width - 别依赖
max-width在<td> 上生效——旧版 Safari 对它支持差，优先用 <code>width控制列基准响应式场景下百分比列宽容易失效的根源
很多人写
th:nth-child(1) { width: 25%; }却发现列宽乱跳，问题往往不在 CSS 本身，而在父级容器没给定宽。百分比列宽的计算依赖<table> 的实际渲染宽度，而这个宽度又取决于它的父容器是否设置了 <code>width或max-width。常见陷阱包括：- 父容器是
display: flex且未设min-width，导致<table> 被压缩到内容最小宽度 <li>用了 <code>width: fit-content或inline-table，让<table> 失去宽度上下文 <li>媒体查询里只改字体大小或 padding，却忘了同步调整列宽百分比或 <code><col>的width
真正难控的不是写法，而是宽度链路太长：从视口 → 父容器 →
<table> → <code><col>→<td> → 文本换行逻辑，任一环缺失或冲突，列宽就脱钩。</td> - 父容器是
- 要换行：加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
