table-layout: fixed 是实现等宽列的必要前提,必须配合表格显式宽度(如width: 100%)和完整<col>声明(如四个width: 25%),缺一不可;<col>比在th/td设width更可靠,且需注意border-collapse、box-sizing及white-space等协同设置。

table-layout: fixed 是平均分配列宽的必要前提,不设它,width: 25% 这类声明基本无效。
必须显式设置 table-layout: fixed 和 width
浏览器默认用 table-layout: auto,此时列宽由内容决定,哪怕你给每列写 width="25%",也只当“建议值”,实际可能被长文本撑开。要让它真按比例分,两件事缺一不可:
-
table元素必须有明确宽度,比如style="width: 100%"或style="width: 800px" -
table必须设style="table-layout: fixed" - 如果父容器没设宽度(比如只有
max-width),100%就失去参照,列宽会崩
用 <col> 比在 <th>/<td> 上写 width 更稳
在第一行 <th> 里写 width="25%" 能起作用,但容易被后续样式覆盖或遗漏;<col> 是专为列定义设计的语义化方式,更干净、更可靠:
-
<col>必须放在<thead>之前、<table>开始后 - 四列等宽就写四个
<col style="width: 25%">,不能少一个,否则未声明列会回退到自动计算 - 不要混用单位:比如一个写
width: 25%,另一个写width: 120px,fixed 模式下剩余空间分配会出错
为什么写了 25% 还是不等宽?常见坑点
表面看代码没问题,但实际渲染失衡,往往卡在这几个地方:
立即学习“前端免费学习笔记(深入)”;
-
border-collapse: collapse没设,边框双倍叠加导致视觉宽度不一致 -
box-sizing: border-box缺失,padding和border额外吃掉列宽空间 - 某列内容用了
white-space: nowrap,长文本拒绝换行,直接撑裂该列 -
<colgroup>被包在<thead>里,位置错——它必须紧贴<table>开始标签后
真正麻烦的不是写几行 CSS,而是所有约束条件必须同时满足:固定布局、明确总宽、<col> 完整声明、盒模型统一、换行策略合理。漏掉任意一环,25% 就只是个幻觉。



















