table-layout: fixed 是实现表格列宽精确控制的唯一可靠方法，必须配合 <col> 标签或首行单元格 width 设置，且 <col> 需置于 <thead> 前；三列表格中左、右列设像素宽，中间列用 width: auto 占据剩余空间，并需手动处理换行或截断。
用 table-layout: fixed 配合 width 控制列宽是唯一可靠路径
浏览器对 <table> 的默认布局（auto）会根据内容撑开列宽，根本无法实现“左右固定、中间自适应”。必须显式设为 fixed，才能让列宽严格按 <col> 或第一行 <td> 的 width 计算。
常见错误是只给 <th> 或 <td> 加 width 但没设 table-layout: fixed，结果毫无作用。
-
<col>标签必须放在<table>内、<thead>前，且不能写在<tbody>里 - 第一行
<tr>的<th>或<td>的width属性（或内联style="width:..."）也会被fixed模式采纳，但优先级低于<col> - 设了
table-layout: fixed后，所有后续行的单元格宽度将忽略自身内容和width设置，完全由第一行或<col>决定
三列表格中如何精准指定左、右列像素宽度
假设左列 120px、右列 80px、中间自适应，关键不是靠 flex 或 grid —— 那些不适用于原生表格语义。必须用 <col> 显式声明：
<table style="table-layout: fixed; width: 100%;"> <col style="width: 120px;"> <col style="width: auto;"> <col style="width: 80px;"> <thead><tr><th>姓名</th><th>备注</th><th>操作</th></tr></thead> <tbody><tr><td>张三</td><td>很长很长的描述文字，会自动换行或省略</td><td>编辑</td></tr></tbody> </table>
注意：<col> 的 width: auto 并非“填满剩余”，而是“由内容决定”——但因 table-layout: fixed 已启用，实际效果是剩余空间全归它。若中间列内容超长又不想换行，需额外加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;。
立即学习“前端免费学习笔记（深入）”；
中间列内容溢出时的截断与换行控制
固定布局下，中间列默认不会自动换行，文字会横向撑出表格边界。必须手动干预：
- 允许换行：给中间列的
<td>或对应<col>加word-break: break-word;或overflow-wrap: break-word; - 强制单行+省略：加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但需确保该<td>有display: block或父容器设table-layout: fixed生效 - 避免用
min-width或max-width直接作用于<td>—— 在fixed模式下它们会被忽略
IE8+ 兼容性与 colgroup 的必要性
虽然现代浏览器支持 <col>，但 IE8 及更早版本对 <col> 的 width 支持不稳定，必须包裹在 <colgroup> 中才可靠：
<colgroup> <col style="width: 120px;"> <col style="width: auto;"> <col style="width: 80px;"> </colgroup>
另外，如果表格有合并单元格（colspan），<col> 定义的列数必须覆盖所有可能的列跨度，否则布局会错乱。比如某行有 colspan="4"，那 <colgroup> 至少得定义 4 个 <col>，哪怕其中两个是空的占位。
真正难的不是写出来，而是想清楚：表格语义是否真需要这种布局？如果只是视觉分栏，display: table 伪表格或 grid 更可控；但如果涉及排序、导出、屏幕阅读器兼容，原生 <table> + fixed 仍是不可替代的选择。
