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