width属性在td上常失效是因为默认table-layout: auto模式下width仅为建议值，需设table-layout: fixed并置于首行或用col元素才能精确控制列宽。

WIDTH属性在TD上为什么经常失效？ 浏览器对 width 属性的处理取决于表格的 table-layout 计算模式。默认是 auto，此时 width 只作为“建议值”，实际宽度由内容撑开，哪怕你写了 <td width="20%"> 或 <code><td width="150">，也可能被忽略。 <ul> <li> <code>table-layout: auto（默认）：列宽由最长单元格内容决定，width 仅影响该列最小宽度，不强制分配

table-layout: fixed：整行第一行 th/td 的 width 值直接决定各列宽度，后续行不再影响列宽计算

所以，想用 width 精确控制列宽，必须显式设置 table-layout: fixed，且把宽度定义放在第一行（或 col 元素上更稳妥）。

用COL标签定义比例宽度最可靠col 是唯一专为列宽控制设计的语义化元素，配合 table-layout: fixed 能稳定实现比例分配。

A

B

C

• col 的 width 支持百分比、像素、数字（如 width="2" 表示相对权重，但需所有 col 都用数字才生效）
• 百分比基于表格总宽计算，不受内容影响
• 不要混用单位（比如一个写 20%，另一个写 100px），否则比例可能意外崩坏

TD上的WIDTH属性只在fixed模式+首行生效 如果坚持用 td 的 width 属性（比如从旧系统迁移），必须满足两个硬性条件：

• 表格 CSS 必须含 table-layout: fixed
• 宽度值必须写在第一行的 td 或 th 上（后续行的 width 会被忽略）

例如：

anything-to-html

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

下载

固定200px	占剩余宽度30%	占剩余宽度50%
内容再长也不会撑宽	同上	同上

• 第一行的 width 值相加不等于100%时，浏览器会按比例重算（比如 200 + 30% + 50% → 先算像素部分，再把剩余空间按百分比分）
• 后续行写 width 没用，DOM里能看到属性，但渲染完全不认

百分比宽度在嵌套表格或flex容器里容易失灵 如果你的 table 被包在 div 里，而这个 div 没有明确宽度（比如只设了 max-width 或 display: flex），那么 width="30%" 就会失去参照系——它按谁的100%算？

• 父容器必须有可计算的宽度（width、max-width + 内容足够宽、或 flex item 的 flex-basis）
• 避免把表格放进 display: inline-block 容器，它的宽度行为不稳定
• 如果父级是 flex，建议给 table 显式设 flex: 0 0 auto 或固定 width，否则 table-layout: fixed 可能被 flex 强制重排

真正难的不是写对那一行代码，而是确认整个宽度链路上每个父级都有确定的尺寸上下文——漏掉一层，比例就漂了。

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