必须设置 table-layout: fixed 并配合 才能精确控制列宽；否则 td width 属性仅作提示，列宽由内容决定。
直接改 浏览器默认用 这是目前最可靠、语义最清晰的方式，尤其适合固定某列像素宽、其余列自适应的场景。关键点在于： 不加这个声明，所有列宽控制手段（包括 在移动端或弹性布局里，用像素值锁死列宽会破坏自适应能力。百分比虽好，但多列相加不等于 100% 时，浏览器行为不可预测； 文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。 最容易被忽略的是：即使用了 <table> 的 <code>width 属性或 CSS width 样式，只能控制整体宽度；真要精确调列宽，必须配合 table-layout: fixed 和 <colgroup></colgroup>，否则所有列宽设置都只是“建议”。
为什么
td width="200" 经常不生效table-layout: auto，此时列宽由整列中最宽单元格内容决定，<td width="200"> 只是提示，不是指令。如果同一列有更长的 URL 或无空格文本，该列仍会被撑开。另外，<code>width 是 HTML 属性，会被同名 CSS 样式覆盖，但若没设 table-layout: fixed，CSS 的 width 也仅作参考。
<td> 上的 <code>width 只影响首行对应列的初始计算，后续行不继承
width="30%"）是相对于整个表格宽度，不是父容器，容易误判table-layout: fixed 后，<td> 的 <code>width 属性会被跳过，只读取 <col> 或首行 <th>/</th>
<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>、<code><th> 上，且要确保父 <code><table> 有明确宽度（如 <code>width: 100%）
响应式表格中避免硬编码
width 值1fr 虽直观，但 Safari 不支持。真正稳妥的做法是：用 table-layout: auto 配合 word-break: break-word 和 white-space: normal，再用 overflow-x: auto 包裹表格容器，让横向滚动成为兜底方案。
word-break: break-all 比 word-wrap: break-word 更激进，能彻底防撑开white-space: nowrap 适合状态列、操作列等绝对不允许换行的场景，但会强制列宽扩展data-label 属性可用来还原表头语义，不能只靠视觉隐藏<colgroup></colgroup> 和 table-layout: fixed，如果 <table> 自身没设明确宽度（比如 <code>width: 100% 或具体像素），列宽定义依然无效——它没有基准可依。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
