table-layout: fixed 是实现表格列宽可控的关键，需配合 col 或首行单元格设置百分比宽度、表格容器明确宽度及 table width: 100%，并处理溢出与兼容性问题。
table-layout: fixed 是表格自适应宽度的关键
默认情况下，table-layout: auto 会让浏览器根据内容撑开列宽，导致列宽不可控、响应式失效。要实现真正可控的百分比列宽，必须显式设置 table-layout: fixed —— 它让表格按 col 或第一行 th/td 的宽度（或 width 声明）来分配列宽，后续行内容溢出也不会影响布局。
百分比列宽必须作用在 col 元素或第一行单元格上
直接给 td 或 th 设 width: 30% 在 table-layout: fixed 下往往无效，因为浏览器优先读取 col 或首行定义的基准宽度。推荐写法：
- 用
- 或在第一行
th上设width：姓名 描述 操作
注意：百分比是相对于表格容器（如 div）的宽度计算的，不是父表格本身。
内容溢出时需配合 white-space 和 overflow
table-layout: fixed 下，长文本或未换行内容会撑破列宽或溢出。常见处理方式：
立即学习“前端免费学习笔记（深入）”；
- 强制单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 允许自动换行：
word-break: break-word;或overflow-wrap: break-word;（注意white-space: normal） - 避免图片/内联元素撑宽：给
img加max-width: 100%; height: auto;
兼容性和边界情况要注意
IE8+ 支持 table-layout: fixed，但某些移动端 WebView 对 col 的百分比解析不稳定。更稳妥的做法是：
- 表格容器（如
div）必须有明确宽度（比如width: 100%或具体像素值），否则百分比列无参照 - 避免混合使用
px和%列宽，容易触发浏览器回退到auto行为 - 如果用了
border-collapse: collapse，记得border会占用空间，可能让总宽超 100%，必要时用box-sizing: border-box配合padding调整
最易被忽略的一点：表格本身没有设定 width 时，即使子列写了百分比，整个表格仍可能收缩为内容最小宽度——务必给 table 元素加 width: 100%。
