width: 100% 失效主因是父容器无明确宽度、缺少 viewport 设置或 table-layout 未设为 fixed；需配合 定义列宽、重置 body margin，并在小屏用媒体查询转堆叠布局保可读性。
直接设 width: 100% 不够，必须同时确保父容器有明确宽度、table-layout 行为可控、且避免内容撑破列宽——否则小屏下极易横向溢出或文字挤压。
为什么 width: 100% 经常没反应
因为百分比宽度是相对于父元素计算的，而 body 默认不是 100% 视口宽：它带默认 margin，且未显式设宽。常见失效场景包括：
- 没加
<meta name="viewport" content="width=device-width, initial-scale=1.0">，移动端按 980px 渲染，width: 100%就算错 -
html或body缺少margin: 0; width: 100%重置 - 父容器（如
div）本身没设宽，或含overflow: hidden导致表格被裁剪 -
table上写了width: 100%，但没配table-layout: fixed，内容仍会动态撑开列
table-layout: fixed 必须搭配 <col> 才真正可控
table-layout: fixed 不是“自动适配”开关，而是把列宽控制权交给你——但它只读第一行单元格或 <col> 的 width 声明，后续所有 <td> 上的 <code>width 都被忽略。
-
<col>必须放在<table> 开始后、<code><thead> 前，优先级最高 <li>单位只支持 <code>%、px、em，fr无效 - 示例写法：
<table style="width: 100%; table-layout: fixed;"> <col width="20%"> <col width="30%"> <col width="50%"> <thead><tr><th>A</th><th>B</th><th>C</th></tr></thead> </table>
- 漏写
<col>的列，宽度由第一行对应<th> 的 <code>width决定；若都没写，列宽会坍缩成最小内容宽窄屏下别硬撑，用滚动或堆叠保可读性
纯 CSS 让表格在 320px 宽屏幕上“自适应列宽”，大概率导致文字挤成一团或换行失控——这不是 CSS 失效，而是表格语义本身不匹配窄屏交互逻辑。
立即学习“前端免费学习笔记（深入）”；
- 小屏首选方案：外层容器加
overflow-x: auto，让表格可横向滚动 - 更优体验：用媒体查询配合
display: block把每行转为垂直堆叠的卡片，用data-label模拟表头 - 慎用
word-break: break-all：它会在任意字符中断行，破坏 URL、邮箱等可读性；优先用word-break: break-word+white-space: normal - IE8+ 支持
table-layout: fixed，但 Outlook（基于 Word 渲染引擎）完全不支持，邮件中务必规避
真正难的不是写对那几行 CSS，而是判断什么时候不该用表格——比如弹窗里展示 10 列数据，与其死磕
table-layout，不如换 Grid 或虚拟滚动列表。 - 小屏首选方案：外层容器加
