必须设置 table-layout: fixed 并配合 <colgroup> 才能精确控制列宽；否则 td width 属性仅作提示，列宽由内容决定。
直接改 <table> 的 width 属性或 CSS width 样式，只能控制整体宽度；真要精确调列宽，必须配合 table-layout: fixed 和 <colgroup>，否则所有列宽设置都只是“建议”。
为什么 td width="200" 经常不生效
浏览器默认用 table-layout: auto，此时列宽由整列中最宽单元格内容决定，<td width="200"> 只是提示，不是指令。如果同一列有更长的 URL 或无空格文本，该列仍会被撑开。另外，width 是 HTML 属性，会被同名 CSS 样式覆盖，但若没设 table-layout: fixed，CSS 的 width 也仅作参考。
-
<td>上的width只影响首行对应列的初始计算，后续行不继承 - 百分比值（如
width="30%"）是相对于整个表格宽度，不是父容器，容易误判 - 用了
table-layout: fixed后，<td>的width属性会被跳过，只读取<col>或首行<th>/<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> 或首行单元格的显式宽度决定，内容再长也不会撑开该列——文字可能换行或溢出，但列宽不变。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 必须配合显式表格宽度才有效，单独写
table { table-layout: fixed; }没用 - 首行
<th>或<td>的width属性会被读取，但优先级低于<col> - 若某列需最小宽度防压缩，得额外加
min-width到<td>、<th>上，且要确保父<table>有明确宽度（如width: 100%）
响应式表格中避免硬编码 width 值
在移动端或弹性布局里，用像素值锁死列宽会破坏自适应能力。百分比虽好，但多列相加不等于 100% 时，浏览器行为不可预测；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> 和 table-layout: fixed，如果 <table> 自身没设明确宽度（比如 width: 100% 或具体像素），列宽定义依然无效——它没有基准可依。
