width="100%"需父容器有明确宽度且table-layout:fixed配合才生效，否则列宽由内容决定；col标签须紧接table后，支持百分比与px混用；防长文本撑开需word-break和white-space配合；小屏建议overflow-x:auto或转卡片布局。
直接写 width="100%" 大概率不生效——不是代码写错了，而是缺了两个关键前提：父容器要有明确宽度，且必须配合 table-layout: fixed。
为什么 width="100%" 总是没反应
浏览器算百分比需要两个确定值：一是父容器的宽度（比如 div 没设 width 或 max-width，那 100% 就没参照）；二是表格得用 table-layout: fixed，否则它仍走默认的 auto 模式，列宽由内容撑开，根本不管百分比。
常见表现：
- 表格看起来“缩不进”容器，右侧溢出
- 列宽忽大忽小，尤其某列塞了个长 URL 就全崩了
- 加了
width="100%"但实际宽度还是内容决定的
table-layout: fixed 必须和 <col> 配合才管用
table-layout: fixed 不是“让列自动适应”，而是“只看第一行或 <col> 的声明来定宽”。没给列指定宽度，它就按第一行 <th> 的 <code>width 算；都没写，就坍缩成最小内容宽。
正确写法要点：
-
<col>标签必须紧接在<table> 开始标签后、<code><thead> 前，放错位置浏览器直接忽略 <li> <code><col width="30%">支持百分比，但所有列百分比加起来不用等于 100%，浏览器会自动归一化 - 混用
px和%时，比如<col width="120"> <col width="70%">，后者按剩余空间重新分配 -
word-break: break-all;（粗暴但有效）或word-wrap: break-word;（优先在单词间断） -
white-space: normal;—— 如果你或重置样式里写了white-space: nowrap，这条必须覆盖掉 - 对
<td> 或 <code><th> 单独加，别只写在 <code><table> 上 <h3>移动端真要自适应，别硬撑表格布局</h3> <p>小屏下强行让 8 列表格缩成 100% 宽，结果字挤成一条线、横向滚动还卡顿，体验比不用表格还差。更务实的做法是：</p> <ul> <li>用 <code>@media查询，在屏幕宽度时给表格外层加 <code>overflow-x: auto，让用户左右滑动看全列 - 或者直接用媒体查询把表格结构转成垂直卡片：
<div class="card"> <strong>姓名</strong>张三</div>，可读性翻倍 -
position: sticky;配合top: 0固定表头，滚动时头不丢，这个比“自适应列宽”实际得多
防长文本撑爆列宽：word-break 和 white-space 得一起调
哪怕用了 table-layout: fixed，如果单元格里有长无空格字符串（如 abc123def456ghij789），浏览器默认不换行，列照样被顶开。
必须加这两条 CSS：
真正难的不是让表格“看起来占满”，而是让信息在窄屏上不丢失、不误读——这点常被初学者忽略，直到上线后被用户吐槽“根本没法看”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
