td宽度设置常无效，因浏览器默认table-layout: auto，列宽由内容最大宽度决定，td的width仅作建议；需配合table-layout: fixed、显式表格宽度及colgroup/col或首行td/th宽度定义才生效。
width 属性在 HTML 表格中看似简单，但实际行为高度依赖上下文——它不是“设多少就占多少”，而是受 table-layout、<col>、内容长度和 CSS 优先级共同支配。直接写 width="300" 在 <td> 上，很可能被忽略；而给 <table> 加 width="100%"，又可能因内容过长导致横向溢出。
为什么 width 属性在 <td> 上经常不生效
浏览器默认使用 table-layout: auto，此时列宽由整列所有单元格内容的最大宽度决定，单个 <td width="200"> 只会被当作“建议值”，若该列其他单元格内容更宽（比如一长串无空格 URL），整列仍会撑开。另外，width 是 HTML 属性，CSS 中同名样式（如 td { width: 200px; }）会覆盖它，但仅当选择器权重足够且未被 table-layout: fixed 干扰时才稳定。
- HTML
width属性在<td>或<th>上，只影响首行对应列的初始计算，后续行不继承 - 若表格用了
table-layout: fixed，则只读取第一行或<col>的宽度定义，<td>上的width属性会被跳过 - 百分比值（如
width="30%"）在<td>上是相对于整个表格宽度计算，不是父容器，容易误判
用 <colgroup> + <col> 精确控制列宽
这是目前最可靠、语义最清晰的列宽控制方式，尤其适合需要固定某列像素宽度、另一列自适应的场景。关键点在于：<colgroup> 必须紧跟 <table> 开始标签后、且在 <thead> 或第一行 <tr> 之前；每个 <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>或<td>的width属性会被读取，但优先级低于<col> - 若某列需最小宽度防压缩，得额外加
min-width到td, th上，且要确保父<table>有明确宽度（如width: 100%）
响应式表格中避免硬编码 width 值
在移动端或弹性布局里，用像素值锁死列宽极易导致横向滚动或内容截断。更稳妥的做法是结合 min-width、max-width 和媒体查询动态调整：
- 对关键列（如操作按钮列）设
min-width: 80px，防止折叠 - 对文本列用
width: 100%; min-width: 120px，兼顾自适应与可读性 - 小屏下改用
display: block拆表为卡片，而非强行缩列宽 - 避免在
<td>上混用 HTMLwidth和内联style="width:..."，易引发优先级混乱
真正难的不是“怎么写”，而是判断当前表格是否处于 auto 还是 fixed 布局、<colgroup> 是否位置正确、以及内容是否含不可折行字符串——这三点没理清，任何 width 设置都会表现异常。
