表格不铺满的根本原因是父容器宽度不可计算且未启用table-layout:fixed；必须同时满足父容器有可计算宽度、table-layout:fixed启用、<col>置于<thead>前三个前提，才能实现精确列宽控制。
表格在特定容器里不铺满，不是因为没写 width: 100%，而是父容器宽度不可计算 + 表格布局模式没切到 table-layout: fixed。这两点缺一不可。
父容器必须有可测量的宽度
浏览器算 100% 时，需要一个明确的参照值。如果父容器是 <div> 且没设 width、max-width 或 flex/grid 约束，它的宽度就是 auto，此时 width: 100% 直接退化为内容自适应。
- 最简验证：给父
<div>加style="width: 100%; height: 300px;"，再看表格是否铺开 - 若父容器本身嵌套多层，建议从上往下逐层检查：有没有某一层漏了宽度约束？有没有用了
display: inline-block导致宽度收缩？ - 框架场景（React/Vue）中，组件默认不占满父级，需显式传
style={{ width: '100%' }}或用 class 控制
必须启用 table-layout: fixed
table-layout: auto（默认）会让列宽由内容决定，哪怕表格外框撑开了，内部列仍可能挤压或溢出；table-layout: fixed 才能让列宽真正服从你设定的规则。
- 只加
table-layout: fixed不够——它会把所有列等分，除非你通过<col>或 CSS 给每列指定宽度 - 推荐写法：
<col style="width: 20%;"><col style="width: 30%;"><col style="width: 50%;">，或用 CSScol:nth-child(1) { width: 20% } - 注意：
table-layout: fixed下，white-space: nowrap（默认）会导致长文本撑破单元格，需配合word-break: break-word或overflow: hidden
为什么 width="100%" 属性常失效
HTML 属性 width="100%" 在现代 CSS 环境下优先级低，且不触发 table-layout: fixed，纯属“装饰性写法”。它只影响表格外框尺寸，对内部列宽无控制力。
立即学习“前端免费学习笔记（深入）”；
- 浏览器解析顺序：CSS 样式 > HTML 属性 > 默认行为。所以必须用 CSS 写
width: 100%和table-layout: fixed - 若用了
<col>，但列宽总和 ≠ 100%，浏览器会按比例重算，但不会自动补足空白——建议显式写满（如25% + 25% + 25% + 25%） - 调试技巧：临时给
<th>和<td>加border: 1px solid red，一眼看出列宽是否对齐、有无错位
真正难的不是写几行 CSS，而是确认父容器宽度链是否完整、table-layout: fixed 是否生效、以及列宽定义是否覆盖全部列——这三者任意一个断掉，表格就只会“看起来像铺满了”，实际渲染永远差那么一点。
