要实现表格列宽自适应，必须同时满足三个条件：父容器有明确宽度、table元素设置table-layout: fixed和width: 100%、用col标签显式定义各列宽度；缺一不可。
直接给 <table> 写 width: 100% 大概率没用——缺了父容器宽度、漏了 table-layout: fixed、或者列宽没用 <col> 定义，三者任一缺失都会让“自适应”变成假象。
父容器必须有可计算宽度
浏览器对百分比宽度的计算依赖父级明确的 width 值。如果父 <div> 没设 width，或只写了 display: block，那 width: 100% 就会退化为 auto，实际宽度由内容撑开。
- 确保父容器有显式宽度：比如
style="width: 100%"、max-width: 800px或固定像素值 - 别忽略
html和body：它们默认有 margin，且未设 width，需重置：html, body { margin: 0; padding: 0; width: 100%; } - 移动端务必加 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 iOS Safari 会按 980px 渲染，100% 就算错了
table-layout: fixed 是硬性前提
table-layout: auto（默认）会让浏览器等所有内容加载完再动态算列宽，小屏下极易被长 URL 或无空格文本撑爆；table-layout: fixed 才能锁定列宽逻辑，让 width 百分比真正生效。
-
<table>必须同时声明：style="width: 100%; table-layout: fixed;" - 只写
width: 100%不加table-layout: fixed，表格视觉上可能变宽，但列仍由内容决定，溢出照旧 - IE8+ 支持该属性，但 Outlook（基于 Word 渲染引擎）不支持，邮件模板中慎用
列宽必须用 <col> 显式定义
<th> 或 <td> 上的 width 属性在 table-layout: fixed 下会被忽略；唯一稳定可控的方式是用 <col> 元素，在 <table> 开始后、<thead> 前紧接声明。
立即学习“前端免费学习笔记（深入）”；
-
<col>必须放在<thead>之前，放错位置（如塞进<thead>里）就无效 - 支持
width="20%"、width="150"（px）、width="2em"，不支持fr单位 - 没写
<col>的列，会 fallback 到第一行<th>的width值；若都没写，列宽坍缩成最小内容宽，导致布局失控
内容溢出要单独处理
table-layout: fixed 锁定了列宽，但长文本、图片、连续无空格字符串仍会撑破单元格。这不是 width 失效，而是视觉表现没约束。
- 单行截断：
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; } - 边框和 padding 会影响总宽，建议加：
box-sizing: border-box;
最常被跳过的不是怎么写 CSS，而是检查父容器有没有宽度、table-layout 有没有设、<col> 放没放在正确位置——这三个点卡住，后面所有样式都白调。
