table-layout: auto 是默认行为，但会导致列宽不稳定、渲染慢；真正可控的方案是 table-layout: fixed 配合 <col> 元素，需注意 <col> 位置、宽度设置及内容溢出处理。
table-layout: auto 是默认行为，但不等于“自适应如你所愿”
浏览器对 <table> 的默认布局就是 table-layout: auto，它会扫描所有行内容，动态分配列宽——这听起来很智能，但实际中常导致列宽忽大忽小、首行和后续行错位、渲染慢（尤其数据量大时）。它不是“按需伸缩”，而是“按全部内容最大值撑开”。
常见错误现象：<th> 写了 width="20%" 但完全没用；某列塞了一长串无空格 URL，整列被拉宽，挤垮其他列；移动端横向溢出却无滚动条。
- 不要依赖
<th width="30%">或style="width: 30%"在auto模式下生效——它们会被内容宽度覆盖 - 若想让列“尽量贴合内容”，必须配合
word-break: break-word或overflow-wrap: break-word，否则长文本直接撑列 -
white-space: normal必须显式设置，否则单元格默认可能继承nowrap行为 - 对图片等内联元素，
img { max-width: 100%; height: auto; display: block; }才能防止它突破列宽基准
table-layout: fixed + <col> 是可控自适应的唯一可靠组合
真正能实现“列宽稳定、内容可预期、响应迅速”的方案，只有 table-layout: fixed 配合 <col> 元素。它把列宽计算提前到第一行渲染前，不再等待全部 DOM 加载，性能好，行为可预测。
关键限制：所有 <col> 必须紧接在 <table> 开始标签后、<thead> 前；不能放在 <thead> 或 <tbody> 里，否则浏览器直接忽略。
立即学习“前端免费学习笔记（深入）”；
-
<col width="150">→ 固定像素，最稳定 -
<col width="40%">→ 百分比，但注意：所有列百分比之和 ≠ 100% 也没关系，浏览器自动归一化 - 混合使用
px和%没问题，比如<col width="120"><col width="60%">，剩余空间由百分比列按比例分 - 没写
<col>的列，会 fallback 到对应位置<th>的width属性；都没写，就坍缩成最小内容宽（常导致列过窄）
内容溢出必须手动处理，width 不是万能锁
即使列宽设死，长文本、URL、连续英文、未缩放图片仍会破坏视觉表现：要么撑破列宽，要么溢出容器外不可见。仅靠 width 或 table-layout: fixed 完全无法约束内容渲染。
必须为 <td> 或 <th> 显式加控制规则：
- 截断显示：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 允许换行（推荐）：
white-space: normal; word-break: break-word;或overflow-wrap: break-word; - 图片强制适配：
img { max-width: 100%; height: auto; display: block; }，且务必删掉<img>标签上的width和height内联属性 - 避免边框影响总宽：加
box-sizing: border-box;并配合border-collapse: collapse;
父容器宽度缺失是 90% 自适应失败的根源
写 width: 100% 却不生效？八成是父容器没给明确宽度。百分比值不是魔法，它需要一个确定的参照物——浏览器不会“猜”父宽。
典型失效场景：<div><table style="width: 100%">…</table></div> 中，那个 <div> 没设 width、max-width 或 flex 等能产生确定尺寸的样式，100% 就退化为 auto。
- 安全做法：给父容器加
width: 100%、max-width: 100%或具体像素值（如max-width: 960px） - Flex/Grid 容器中，确保表格是直接子元素且容器主轴方向正确；否则
width: 100%可能被忽略 - 媒体查询下改列宽时，
<col>本身不支持 CSS 媒体查询，得用 JS 动态替换或改用<th>上的style控制
table-layout 的两种模式本质不同：一个是“等全部内容来了再算”，一个是“只看第一行或 <col> 就拍板”。选错模式，后面所有 width 设置都是徒劳。 
