直接写 width="100%" 或 style="width: 100%" 多数时候不会真占满容器，因缺父容器明确宽度和 table-layout: fixed；必须同时满足二者，并用 <col> 在 <thead> 前定义列宽（支持 %、px、em），配合 white-space 与 overflow 控制溢出，否则列宽仍由内容决定或坍缩为最小内容宽。
直接写 width="100%" 或 style="width: 100%" 多数时候不会真占满容器——缺了两个硬性前提：父容器得有可计算宽度，且 table 必须启用 table-layout: fixed。
为什么 width: 100% 常常不生效
浏览器默认按内容撑开表格，width: 100% 不是“继承父宽”，而是“在父宽基础上算”，但若父容器没设宽度（比如裸 <div>），这个百分比就失去参照，退化为 auto；更常见的是漏掉 table-layout: fixed，导致列宽仍由内容决定，整表看似宽了，列却乱挤或横向溢出。
- 父容器必须有明确宽度：比如
style="width: 100%"、max-width: 768px或固定像素值 -
<table>必须同时声明width: 100%和table-layout: fixed，缺一不可 - 仅靠
<th>或<td>上的width属性无法触发自适应，它们在auto模式下会被忽略
<col> 是唯一稳定定义列宽的方式
<col> 是专为列级控制设计的语义元素，优先级高于任何单元格上的 width 声明，且不依赖首行内容是否渲染完成。写错位置（比如放在 <thead> 里）或单位混用（如 px 和 % 同时出现）都可能导致部分列失效。
-
<col>必须紧接在<table>开始标签后、<thead>前 - 支持
%、px、em，不支持fr（CSS Grid 单位） - 没写
<col>的列，宽度会 fallback 到第一行对应<th>的width，若也没写，就坍缩成最小内容宽
小屏下别硬撑列宽，优先保可读性
纯 CSS 让表格在 320px 宽屏幕上“自适应列宽”，大概率导致文字挤成一团或换行失控——这不是 CSS 失效，而是表格语义本身不匹配窄屏交互逻辑。窄屏下强行拉伸列宽反而破坏信息密度和操作体验。
立即学习“前端免费学习笔记（深入）”；
- 对多列表格，外层加
overflow-x: auto包裹，让用户水平滚动查看全部列 - 用媒体查询在
max-width: 768px下把<table>改为display: block，再用<div>+<dl>模拟堆叠卡片布局 - 避免给
<td>加min-width或max-width，它们在table-layout: fixed下常被跳过
真正让百分比宽度落地的关键，不是写多少 width，而是确保 <col> 在正确位置、用正确单位、配合 table-layout: fixed 和父容器宽度三者同时成立。漏掉任意一个，都会回到“看起来写了但没用”的状态。
