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

table-layout: fixed 是平均分配列宽的必要前提，不设它，width: 25% 这类声明基本无效。

必须显式设置 table-layout: fixed 和 width

浏览器默认用 table-layout: auto，此时列宽由内容决定，哪怕你给每列写 width="25%"，也只当“建议值”，实际可能被长文本撑开。要让它真按比例分，两件事缺一不可：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• table 元素必须有明确宽度，比如 style="width: 100%" 或 style="width: 800px"
• table 必须设 style="table-layout: fixed"
• 如果父容器没设宽度（比如只有 max-width），100% 就失去参照，列宽会崩

用 <col> 比在 <th>/</th> <td> 上写 <code>width 更稳

在第一行 <th> 里写 <code>width="25%" 能起作用，但容易被后续样式覆盖或遗漏；<col> 是专为列定义设计的语义化方式，更干净、更可靠：

• <col> 必须放在 <thead> 之前、<code><table> 开始后 <li>四列等宽就写四个 <code><col style="width: 25%">，不能少一个，否则未声明列会回退到自动计算
• 不要混用单位：比如一个写 width: 25%，另一个写 width: 120px，fixed 模式下剩余空间分配会出错

为什么写了 25% 还是不等宽？常见坑点

表面看代码没问题，但实际渲染失衡，往往卡在这几个地方：

• border-collapse: collapse 没设，边框双倍叠加导致视觉宽度不一致
• box-sizing: border-box 缺失，padding 和 border 额外吃掉列宽空间
• 某列内容用了 white-space: nowrap，长文本拒绝换行，直接撑裂该列
• <colgroup></colgroup> 被包在 <thead> 里，位置错——它必须紧贴 <code><table> 开始标签后 <p>真正麻烦的不是写几行 CSS，而是所有约束条件必须同时满足：固定布局、明确总宽、<code><col> 完整声明、盒模型统一、换行策略合理。漏掉任意一环，25% 就只是个幻觉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！