table-layout: fixed 是实现表格列宽精确控制的唯一可靠方法，必须配合 标签或首行单元格 width 设置，且 需置于 前；三列表格中左、右列设像素宽，中间列用 width: auto 占据剩余空间，并需手动处理换行或截断。

用 table-layout: fixed 配合 width 控制列宽是唯一可靠路径

浏览器对 <table> 的默认布局（<code>auto）会根据内容撑开列宽，根本无法实现“左右固定、中间自适应”。必须显式设为 fixed，才能让列宽严格按 <col> 或第一行 <td> 的 <code>width 计算。

常见错误是只给 <th> 或 <code><td> 加 <code>width 但没设 table-layout: fixed，结果毫无作用。

• <col> 标签必须放在 <table> 内、<code><thead> 前，且不能写在 <code><tbody> 里 <li>第一行 <code><tr> 的 <code><th> 或 <code><td> 的 <code>width 属性（或内联 style="width:..."）也会被 fixed 模式采纳，但优先级低于 <col>
• 设了 table-layout: fixed 后，所有后续行的单元格宽度将忽略自身内容和 width 设置，完全由第一行或 <col> 决定

三列表格中如何精准指定左、右列像素宽度

假设左列 120px、右列 80px、中间自适应，关键不是靠 flex 或 grid —— 那些不适用于原生表格语义。必须用 <col> 显式声明：

姓名	备注	操作
张三	很长很长的描述文字，会自动换行或省略	编辑

注意：<col> 的 width: auto 并非“填满剩余”，而是“由内容决定”——但因 table-layout: fixed 已启用，实际效果是剩余空间全归它。若中间列内容超长又不想换行，需额外加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;。

中间列内容溢出时的截断与换行控制

固定布局下，中间列默认不会自动换行，文字会横向撑出表格边界。必须手动干预：


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
• 允许换行：给中间列的 <td> 或对应 <code><col> 加 word-break: break-word; 或 overflow-wrap: break-word;
• 强制单行+省略：加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但需确保该 <td> 有 <code>display: block 或父容器设 table-layout: fixed 生效
• 避免用 min-width 或 max-width 直接作用于 <td> —— 在 <code>fixed 模式下它们会被忽略

  IE8+ 兼容性与 colgroup 的必要性

  虽然现代浏览器支持 <col>，但 IE8 及更早版本对 <col> 的 width 支持不稳定，必须包裹在 <colgroup></colgroup> 中才可靠：

  <colgroup>
  <col style="width: 120px;">
  <col style="width: auto;">
  <col style="width: 80px;">
  </colgroup>

  另外，如果表格有合并单元格（colspan），<col> 定义的列数必须覆盖所有可能的列跨度，否则布局会错乱。比如某行有 colspan="4"，那 <colgroup></colgroup> 至少得定义 4 个 <col>，哪怕其中两个是空的占位。

  真正难的不是写出来，而是想清楚：表格语义是否真需要这种布局？如果只是视觉分栏，display: table 伪表格或 grid 更可控；但如果涉及排序、导出、屏幕阅读器兼容，原生 <table> + <code>fixed 仍是不可替代的选择。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！