table-layout: fixed 是实现表格等宽布局的必要前提，必须与 width: 100% 同时作用于 table 元素，列宽由首行 th/td 的 width 决定，且需配合 white-space、word-break、box-sizing 等样式确保文本正常换行和尺寸准确。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

table-layout: fixed 是等宽布局的前提

不加这个声明，width 在 <td> 或 <code><th> 上基本无效——浏览器仍按内容撑开列宽，你写的 <code>width: 25% 只是“建议”，不是指令。

• table-layout: fixed 必须作用于 <table> 元素本身，不能只写在 <code><tr> 或 <code><td> 上 <li>必须搭配 <code>width: 100%（或其他明确宽度值）一起用，否则浏览器按默认算法计算总宽，列宽可能塌缩或溢出
• 启用后，列宽完全由第一行单元格（或 <col>）的 width 决定，后续行内容不再影响列宽分配

用 <col> 还是用 td { width: 25% }？

优先用 <colgroup></colgroup> + <col>，语义清晰、优先级高、不受选择器权重干扰；td { width: 25% } 也能用，但容易被其他样式覆盖，且需确保 <th> 同步设置，否则表头列宽错位。 <ul><li> <code><colgroup></colgroup> 必须紧跟在 <table> 开始标签后、<code><thead> 前，顺序错一位就失效 <li>四列等宽可写：<code><col style="width: 25%"> × 4，总和不要超过 100%，否则触发横向滚动条

• 若某列需微调（如首列稍宽），可用 <col width="30%"> + <col width="23.33%"> × 3，但要手动算准总和

为什么设置了等宽，文字还是挤成一团？

常见原因是换行没生效，尤其在小屏或含长单词（URL、哈希）的单元格里。这不是宽度没设对，而是文本渲染规则没调好。

• 检查是否误设了 white-space: nowrap（很多重置样式表会全局给 td 加这个）
• 长单词需显式断行：word-break: break-word 或 overflow-wrap: break-word
• box-sizing: border-box 必须加上，否则 padding 和 border 会撑出 25% 的设定宽度
• 移动端建议加 min-width: 120px 防止百分比算出来太窄，文字叠在一起

Flexbox 不能直接套在 <td> 上 <p>有人试过给 <code><td> 加 <code>display: flex 或 flex: 1，结果毫无反应——因为 <td> 不是标准 Flex item，它受表格渲染模型约束，Flex 属性会被浏览器忽略。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul><li>想让表格整体参与 Flex 布局？可以给父容器（比如 <code><div class="container">）设 <code>display: flex，再把 <table> 当作一个子项处理 <li>但别试图在 <code><td> 内部用 Flex 排版内容——那没问题；想靠 Flex 控制列宽？走不通 <li>真正可控的列宽路径只有两条：一是 <code>table-layout: fixed + <col> 或 width，二是用 CSS Grid 替代表格（但语义和可访问性需重新评估） 实际应用中，最易被忽略的是 table-layout: fixed 和 width: 100% 必须同时存在，且都写在 <table> 上——少一个，整个等宽逻辑就失效。</table>