table-layout: fixed 是实现固定列宽的关键，否则width属性无效；列宽由<col>或第一行单元格的width决定，需配合overflow、white-space等控制内容溢出，且需注意兼容性和响应式处理。
table 设置 table-layout: fixed 是关键
不加这个 CSS，table 默认是 auto 布局，列宽由内容撑开，哪怕你写了 width 也没用。只有设成 fixed，表格才会严格按你定义的列宽（比如 col 或第一行 td 的宽度）来分配空间。
注意：一旦启用 table-layout: fixed，所有列宽由第一行的 col 元素或第一行 td/th 的 width 决定，后续行的单元格宽度会被忽略。
-
<col>是最干净的写法，推荐优先使用：<table style="table-layout: fixed; width: 600px;"> <col style="width: 120px"> <col style="width: 200px"> <col style="width: 180px"> <col style="width: 100px"> <tbody><tr><td>A</td><td>B</td><td>C</td><td>D</td></tr></tbody> </table>
- 如果没写
<col>，浏览器会退而求其次看第一行<th>或<td>的width属性（内联或 CSS），但兼容性略差，且容易被内容溢出破坏 - 别在
td上单独设width期望它生效——fixed模式下它只是“建议”，不保证结果
固定宽度下文本换行和溢出要手动处理
内容超长时，默认会把整行撑宽，破坏布局。必须显式控制溢出行为：
- 强制截断加省略号：
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 允许换行但限制高度（适合多行文本）：
word-break: break-word; white-space: normal; - 注意：
td需要设display: table-cell（默认就是）且不能设min-width，否则可能绕过table-layout: fixed的约束
示例（配合 fixed 使用）：
<td style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"> 这是一段特别长的描述文字，超出就截断 </td>
IE 和旧版 Safari 对 <col> 宽度支持不稳定
尤其 IE9–IE11 在某些嵌套或动态渲染场景下，<col> 的 width 可能被忽略，最终回退到 auto 行为。这时得补一层兜底：
立即学习“前端免费学习笔记（深入）”；
- 给第一行每个
th或td加内联width（如<th width="120">），比 CSS 更可靠 - 避免在
<col>上用百分比宽度（如width: 20%），部分老浏览器解析异常 - 若用 JS 动态生成表格，确保
<col>在<tbody>之前插入，且 DOM 已挂载完成再读取宽度
响应式场景下固定宽度表格容易出问题
直接写死像素宽度（如 width: 800px）在小屏上必然横向滚动或溢出。真要兼顾响应式，得做取舍：
- 用
max-width+overflow-x: auto包裹表格容器，让整表可滑动：<div style="overflow-x: auto;"><table style="table-layout: fixed; width: 100%;">...</table></div>
- 媒体查询中切换为
table-layout: auto并改用flex或grid模拟表格语义（复杂但更可控） - 移动端优先项目，干脆放弃原生
table，用display: grid模拟列对齐，避免table-layout的各种隐式约束
固定宽度表格不是“设了 width 就完事”，它是一套行为契约：你承诺控列宽，浏览器承诺不自适应。一旦内容、字体、缩放、JS 插入或 CSS 重置打破这个契约，布局就悄悄崩了。
