表格width="100%"常失效，因缺父容器明确宽度和table-layout:fixed；必须同时设置二者，并用<col>定义列宽，配合white-space与overflow控制溢出。
只写 width="100%" 或 style="width: 100%"，表格大概率不会真占满父容器——因为缺少两个硬性前提：父容器得有可计算宽度，且必须启用 table-layout: fixed。
为什么 width="100%" 常常失效
浏览器默认按内容撑开 <table>，width: 100% 不是“继承父宽”，而是“在父宽基础上计算”，但若父容器没设宽度（比如 <div> 没写 width），这个百分比就失去参照，退化为 auto；更常见的是漏掉 table-layout: fixed，导致列宽仍由内容决定，整表看似宽了，列却乱挤或溢出。
- 父容器必须有明确宽度：比如
<div 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，若也没写，就坍缩成最小内容宽 - 示例正确结构：
<table style="width: 100%; table-layout: fixed;"> <col width="120"> <col width="30%"> <col width="20%"> <thead><tr><th>序号</th><th>名称</th><th>状态</th></tr></thead> </table>
内容溢出时，white-space 和 overflow 必须配对
table-layout: fixed 锁定了列宽，但长文本、URL、连续无空格英文仍会撑破或溢出单元格，单靠 width 无法约束视觉表现。不同场景需不同组合：
立即学习“前端免费学习笔记（深入）”；
- 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（<td>默认是table-cell，可直接用） - 自动换行：
word-break: break-word;或overflow-wrap: break-word;，同时确保white-space: normal; - 图片破坏列宽：
img { max-width: 100%; height: auto; }，否则会无视列宽基准 - 边框影响总宽：加
box-sizing: border-box;让width: 100%包含边框和 padding
最易被忽略的不是怎么写 width，而是忘了父容器有没有宽度、table-layout 没设、以及 <col> 放错了位置——这三个点卡住，后面所有样式都白调。
