必须同时设置 table-layout: fixed 和 width: 100% 才能使百分比列宽生效；浏览器仅读取首行单元格宽度，且未设 width 的 table 会退回到 auto 模式；列宽应定义在 col 上，避免混用 min/max-width，单位仅支持 %、px、em；超长无空格文本需加 word-break 或 overflow-wrap；图片需 max-width: 100%；多列时应优先保障可触达性而非强行均分。
必须同时设置 table-layout: fixed 和 width: 100%，否则任何百分比列宽声明都只是摆设。
为什么 width: 20% 写在 <th> 或 <code><td> 上没用
<p>浏览器在 <code>table-layout: fixed 模式下只读取第一行单元格（或 <col>）的宽度值，后续所有 <td> 的 <code>width 声明全被忽略；更关键的是，如果 <table> 自身没设 <code>width，哪怕你写了十遍 width: 20%，浏览器也会退回到 auto 模式，按内容撑开列宽。
<table> 必须有明确 <code>width（如 width: 100% 或 width: 800px）
- 列宽定义优先写在
<col> 上，位置必须紧接 <table> 开始标签后、<code><thead> 前
<li>
<code><col width="25%"> 是稳定解法；<th style="width: 25%"> 在 fixed 模式下可能被跳过
<li>避免混用 <code>min-width/max-width——它们在 fixed 模式下常失效，导致列意外坍缩
<col> 的单位和 fallback 行为
<col> 只支持 %、px、em，不支持 fr；没写 <col> 的列，宽度会 fallback 到第一行对应 <th> 的 <code>width 值；如果第一行也没设，该列就按最小内容宽渲染，容易窄到看不见文字。
- 三列均分：写三个
<col width="33.33%">，别用 33% + 33% + 34% 这种凑数写法（累计误差可能导致最后一列错位）
- 想锁死某列固定像素宽（如操作列），直接写
<col width="120">，其余列用百分比补足
- 父容器必须有可计算宽度（比如
max-width: 1200px 或 width: 100%），否则百分比无参照
长文本、URL、连续英文怎么不撑破列宽
table-layout: fixed 锁定了列宽计算逻辑，但不等于内容自动换行。超长无空格字符串（如日志 ID、Base64 片段、URL）仍会突破边界，造成横向溢出或文字挤压。
- 对纯文本列，加
word-break: break-word 或 overflow-wrap: break-word（后者更尊重单词边界）
- 对操作类列（按钮/图标），用
white-space: nowrap 防止误换行，再配 min-width: 80px 防止缩太小
- 图片必须加
max-width: 100% 和 height: auto，否则无视列宽约束
- 边框和
padding 会增加单元格总宽，建议统一用 box-sizing: border-box
真正难处理的不是怎么写百分比，而是当列数 >5 或某列含不可折行字段时，强行均分会把文字压到 10px 以下、点击区域难以触达——这时候“自适应”本质是让用户能滚动查看，而不是让每列都变窄。
<table> 必须有明确 <code>width（如 width: 100% 或 width: 800px）
<col> 上，位置必须紧接 <table> 开始标签后、<code><thead> 前
<li>
<code><col width="25%"> 是稳定解法；<th style="width: 25%"> 在 fixed 模式下可能被跳过
<li>避免混用 <code>min-width/max-width——它们在 fixed 模式下常失效，导致列意外坍缩
<col> 的单位和 fallback 行为
<col> 只支持 %、px、em，不支持 fr；没写 <col> 的列，宽度会 fallback 到第一行对应 <th> 的 <code>width 值；如果第一行也没设，该列就按最小内容宽渲染，容易窄到看不见文字。
- 三列均分：写三个
<col width="33.33%">，别用33%+33%+34%这种凑数写法（累计误差可能导致最后一列错位） - 想锁死某列固定像素宽（如操作列），直接写
<col width="120">，其余列用百分比补足 - 父容器必须有可计算宽度（比如
max-width: 1200px或width: 100%），否则百分比无参照
长文本、URL、连续英文怎么不撑破列宽
table-layout: fixed 锁定了列宽计算逻辑，但不等于内容自动换行。超长无空格字符串（如日志 ID、Base64 片段、URL）仍会突破边界，造成横向溢出或文字挤压。
- 对纯文本列，加
word-break: break-word或overflow-wrap: break-word（后者更尊重单词边界） - 对操作类列（按钮/图标），用
white-space: nowrap防止误换行，再配min-width: 80px防止缩太小 - 图片必须加
max-width: 100%和height: auto，否则无视列宽约束 - 边框和
padding会增加单元格总宽，建议统一用box-sizing: border-box
真正难处理的不是怎么写百分比，而是当列数 >5 或某列含不可折行字段时，强行均分会把文字压到 10px 以下、点击区域难以触达——这时候“自适应”本质是让用户能滚动查看，而不是让每列都变窄。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
