td宽度设置常无效，因浏览器默认table-layout: auto，列宽由内容最大宽度决定，td的width仅作建议；需配合table-layout: fixed、显式表格宽度及colgroup/col或首行td/th宽度定义才生效。

width 属性在 HTML 表格中看似简单，但实际行为高度依赖上下文——它不是“设多少就占多少”，而是受 table-layout、<col>、内容长度和 CSS 优先级共同支配。直接写 width="300" 在 <td> 上，很可能被忽略；而给 <code><table> 加 <code>width="100%"，又可能因内容过长导致横向溢出。

为什么 width 属性在 <td> 上经常不生效 <p>浏览器默认使用 <code>table-layout: auto，此时列宽由整列所有单元格内容的最大宽度决定，单个 <td width="200"> 只会被当作“建议值”，若该列其他单元格内容更宽（比如一长串无空格 URL），整列仍会撑开。另外，<code>width 是 HTML 属性，CSS 中同名样式（如 td { width: 200px; }）会覆盖它，但仅当选择器权重足够且未被 table-layout: fixed 干扰时才稳定。

• HTML width 属性在 <td> 或 <code><th> 上，只影响首行对应列的初始计算，后续行不继承 <li>若表格用了 <code>table-layout: fixed，则只读取第一行或 <col> 的宽度定义，<td> 上的 <code>width 属性会被跳过
• 百分比值（如 width="30%"）在 <td> 上是相对于整个表格宽度计算，不是父容器，容易误判 <h3>用 <code><colgroup></colgroup> + <col> 精确控制列宽

这是目前最可靠、语义最清晰的列宽控制方式，尤其适合需要固定某列像素宽度、另一列自适应的场景。关键点在于：<colgroup></colgroup> 必须紧跟 <table> 开始标签后、且在 <code><thead> 或第一行 <code><tr> 之前；每个 <code><col> 按顺序对应一列，缺位即回退自动计算。

• <col width="120">：设置固定像素宽度（HTML 属性，兼容性好）
• <col style="width: 25%">：百分比基于表格总宽度，不是父容器
• <col style="width: 1fr">：仅 Chromium/Firefox 支持，非标准，生产环境慎用
• 未声明的列不会继承前一个 <col> 的宽度，而是按内容重新计算

table-layout: fixed 是宽度可控的前提

不加这个声明，所有列宽控制手段（包括 <col> 和 CSS width）都只是“尽力而为”。启用后，列宽完全由 <col> 或首行单元格的显式宽度决定，内容再长也不会撑开该列——文字可能换行或溢出，但列宽不变。

• 必须配合显式宽度定义才有效，单独写 table { table-layout: fixed; } 没用
• 首行 <th> 或 <code><td> 的 <code>width 属性会被读取，但优先级低于 <col>
• 若某列需最小宽度防压缩，得额外加 min-width 到 td, th 上，且要确保父 <table> 有明确宽度（如 <code>width: 100%）

  响应式表格中避免硬编码 width 值

  在移动端或弹性布局里，用像素值锁死列宽极易导致横向滚动或内容截断。更稳妥的做法是结合 min-width、max-width 和媒体查询动态调整：

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 对关键列（如操作按钮列）设 min-width: 80px，防止折叠
  • 对文本列用 width: 100%; min-width: 120px，兼顾自适应与可读性
  • 小屏下改用 display: block 拆表为卡片，而非强行缩列宽
  • 避免在 <td> 上混用 HTML <code>width 和内联 style="width:..."，易引发优先级混乱

    真正难的不是“怎么写”，而是判断当前表格是否处于 auto 还是 fixed 布局、<colgroup></colgroup> 是否位置正确、以及内容是否含不可折行字符串——这三点没理清，任何 width 设置都会表现异常。

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