必须显式设置 table-layout: fixed，否则列宽控制无效；它使浏览器仅依据第一行或<col>定义宽度，配合width:100%和<col width="25%">才能实现稳定等宽。
必须显式设置 table-layout: fixed，否则所有列宽控制都无效——这是最常被忽略的前提。
为什么 table-layout: fixed 是等宽列的硬性前提
浏览器默认用 table-layout: auto，它会扫描整张表的内容（包括所有行、所有单元格）再决定每列宽度。哪怕你给 <th> 写了 width: 25%，只要某行有个超长无空格字符串（比如一串 base64 或长 URL），那一列就会被撑开，其他行跟着变形。
table-layout: fixed 改变的是渲染逻辑：只看第一行（或 <col>）的宽度声明，后续行严格对齐，不重算。没有这一步，width 值基本等于没写。
- 必须写在
<table>元素上，写在<tr>或<td>上无效 - 搭配
width: 100%才能触发“均分”行为；只设table-layout: fixed但没设宽度，列宽可能坍缩或按内容最小值撑开 - IE8+ 和所有现代浏览器都支持，无需前缀
用 <col> 还是用 <th> 设列宽
<col> 是唯一语义清晰、优先级最高、且不受内容干扰的列宽定义方式。它的宽度声明在布局计算早期就生效，不会被 min-width、white-space 或文本溢出反向覆盖。
立即学习“前端免费学习笔记（深入）”；
而直接在 <th> 或 <td> 上写 width，容易被以下情况绕过：
- 单元格内含图片或
inline-block元素，触发最小内容宽度保护 - 父容器有
max-width约束，导致宽度声明被压缩 - 没加
box-sizing: border-box，边框/内边距额外增加实际占用
推荐写法：
<table style="table-layout: fixed; width: 100%;"> <col width="25%"> <col width="25%"> <col width="25%"> <col width="25%"> <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead> </table>
四列等宽但内容溢出时怎么不破形
等宽列破功的主因不是列宽不准，而是单元格内文字强行撑高、换行错位或触发重排。关键不是“压住宽度”，而是“管住内容行为”。
- 强制换行：给
<td>和<th>加word-break: break-word（注意不是break-all，后者会断开正常单词） - 禁止单行溢出：配合
white-space: normal，避免nowrap残留 - 防图片撑宽：表格内图片统一加
max-width: 100%; height: auto - 避免
overflow: hidden直接裁剪——它会让可读性暴跌，应作为最后手段
示例样式：
table { table-layout: fixed; width: 100%; }
col { width: 25%; }
td, th { word-break: break-word; white-space: normal; }
响应式下百分比 width 的兼容陷阱
<col width="25%"> 在 table-layout: fixed 下行为稳定，但仅限于父容器有明确宽度（如 width: 100% 或固定像素）。如果父容器本身宽度不确定（比如 Flex 容器未设 flex-basis），百分比可能失效，列宽会回退到均分逻辑，但比例失准。
- 移动端小屏时，25% 列宽可能过窄，文字挤成多行——这不是 bug，是 fixed 布局的必然表现
-
<col>不支持媒体查询，无法直接写@media (max-width: 768px) { col:nth-child(1) { width: 50%; } } - 真要响应式调列宽，得用 JS 动态改
<col>的style.width，或干脆换 CSS Grid
简单场景下，更稳妥的做法是：用固定像素（如 width="120"）保底线，再靠容器宽度收缩整体比例——毕竟等宽的本质是“相对均等”，不是“绝对相等”。
