width="100%"不生效的主因是父容器无明确宽度且table-layout未设为fixed；必须配合定义列宽，并设置word-break等换行属性防内容撑破。
width="100%" 为什么经常不生效？
单独写 width="100%" 或 style="width: 100%;"，表格大概率不会真占满父容器——因为缺两个硬性前提：父容器必须有可计算的宽度，且 table-layout 必须设为 fixed。
常见错误现象是：表格看起来“宽了”，但列宽仍由内容撑开，导致文字溢出、列挤成一团，或右侧留白。这是因为浏览器默认用 table-layout: auto，它忽略百分比宽度，只按首行内容动态分配列宽。
- 父容器没设宽度（比如裸
<div>），<code>100%就失去参照，退化为auto - 漏掉
table-layout: fixed，<col>或单元格上的width都会被无视 <th> 或 <code><td> 上直接写 <code>width="30%"在auto模式下无效，仅在fixed下起作用必须用
定义列宽，不能只靠 td/th <col>是唯一能稳定控制列级宽度的语义元素，优先级高于任何单元格内联样式，且不依赖首行是否渲染完成。写错位置或单位混用，会导致部分列失效。正确结构必须是：
<table> 开始后、<code><thead> 前紧贴放置 <code><col>；支持px、%、em，不支持fr。-
<col width="200">→ 固定 200px -
<col width="30%">→ 占表格总宽 30%，其余列按剩余比例或内容自动分 - 没写
<col>的列，会 fallback 到第一行对应<th> 的 <code>width属性，若也没设，就坍缩成最小内容宽 - 别把
<col>放进<thead> 或 <code><tbody> 里，它只认 <code><table> 直接子元素 <h3>响应式场景下要防内容撑破列宽</h3> <p>即使用了 <code>table-layout: fixed和<col>，长文本（如 URL、无空格 ID）仍会强行撑开列宽，破坏自适应效果。这不是宽度设置错了，而是换行策略没跟上。- 给
<td> 和 <code><th> 加 <code>word-break: break-all或word-wrap: break-word，强制断词 - 设
white-space: normal（别用nowrap），确保换行可用 - 配合
min-width: 80px防过窄，max-width: 300px防过宽，避免极端变形 - 小屏时建议外层加
overflow-x: auto容器，而不是让表格强行压缩——人眼读表优先级高于“填满屏幕” - 用媒体查询把整张表转成垂直堆叠的
<div> 卡片，每行数据变成一个带标签的字段组 <li>保留原表结构但加 <code>display: block+overflow-x: auto，让用户左右滑动查看全列 - 删减非核心列（如 ID、创建时间），优先展示业务主字段，比强行缩放更有效
- 千万别对
<table> 做 <code>transform: scale()—— 会模糊文字、破坏点击热区、影响可访问性真正麻烦的不是怎么写百分比，而是判断什么时候不该用表格。列数超过 5、行高差异大、需要频繁排序筛选时，
<table> 本身就成了瓶颈，这时候换组件比调样式更省力。</table>
移动端适配别硬撑，该转就转
纯靠 CSS 缩放表格，在手机上永远不如结构降级来得可靠。当视口宽度 width: 100% +
table-layout: fixed往往只是把横向滚动条藏得更深，用户反而更难操作。 - 给
-
