table-layout: fixed 不能直接让列等宽，因为它仅启用固定布局模式，不自动均分宽度；必须显式通过<col>元素（如width: calc(100% / n)）或首行单元格设置每列宽度，否则浏览器会将全部宽度分配给第一列，其余列收缩至最小宽度。
table-layout:fixed 为什么不能直接让列等宽
设置 table-layout: fixed 后，浏览器不再根据内容自动计算列宽，而是按 <col>、width 属性或第一行单元格的宽度来分配——但**它不会自动“平均”分配**。如果你只写 table { table-layout: fixed; width: 100%; }，而没给列指定宽度，多数浏览器会把全部宽度塞给第一列，其余列收缩到内容最小宽度（甚至 0），尤其在没有 <col> 或 th/td 上设 width 的情况下。
必须显式定义每列宽度才能平均分配
要真正实现“平均”，得让每列占总宽的 1/n（n 是列数）。最可靠的方式是用 <col> 元素配合百分比或 calc()：
-
<col>必须放在<table>内、<thead>前，且数量严格等于列数 - 用
width: calc(100% / n)比纯百分比更安全（避免小数舍入累积误差） - 如果列数动态（如 JS 渲染），需同步生成对应数量的
<col>或用 CSS 变量 +calc()
示例（4 列）：
<table style="table-layout: fixed; width: 100%;"> <col style="width: calc(100% / 4)"> <col style="width: calc(100% / 4)"> <col style="width: calc(100% / 4)"> <col style="width: calc(100% / 4)"> <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead> <tbody><tr><td>xxx</td><td>long content here</td><td>short</td><td>ok</td></tr></tbody> </table>
用 width="25%" 在 td/th 上行不行
可以，但风险高：
立即学习“前端免费学习笔记（深入）”；
- 必须给**每一行**的每个
td或th都加width="25%"（内联属性），CSS 的width在td上对table-layout: fixed也生效，但优先级低于<col> - 如果某行列数不足（比如合并单元格
colspan），会导致宽度错乱，后续列偏移 - 响应式场景下，
width="25%"在窄屏可能撑破容器，而<col>+calc()更可控
文字溢出和换行怎么处理
table-layout: fixed 下列宽固定，内容超长默认不换行，容易溢出或撑高行高。必须主动控制：
- 加
word-break: break-word或overflow-wrap: break-word让长单词折行 - 禁用默认空白符折叠：
white-space: normal（默认是normal，但某些重置 CSS 会设成nowrap） - 如果想强制单行+省略，用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但需同时设max-width（否则无效）
推荐组合：
td, th {
white-space: normal;
word-break: break-word;
}
关键点就一个：fixed 布局不自动均分，<col> 是唯一稳定可控的列宽锚点；漏掉一个 <col>，后面全乱；动态列数时，别硬写死 calc，要用 JS 同步生成或 CSS 自定义属性计算。
