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