table-layout: fixed 是最可控的列宽自适应方案，因其列宽由表格总宽及 <col> 或第一行单元格的 width 决定，但需确保 <table> 有明确宽度、避免 min/max-width 干扰、优先使用 <col> 定义列宽，并配合外层 overflow-x: auto 应对小屏溢出。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

直接用 table-layout: fixed 配合 <col> 是目前最可控、最可预测的列宽自适应方案；靠 width 写在 <td> 或第一行 <code><th> 上，多数时候会失效。<h3>为什么 <code>table-layout: fixed 加 width 在 <td> 上没反应<p>fixed 模式下，浏览器只读取第一行单元格（或 <code><col>）的 width 声明，后续所有 <td> 上的 <code>width 都被忽略。更关键的是：如果 <table> 本身没设 <code>width，哪怕你给每列都写了 width: 20%，浏览器也会按内容最小宽度撑开——结果就是列宽全坍缩。

• <table> 必须有明确的 <code>width（如 width: 100% 或 width: 800px）
• 列宽声明必须落在 <col> 元素上，或第一行的 <th>/<code><td> 中<li>避免混用 <code>min-width、max-width，它们在 fixed 下常被跳过
• 父容器若没设 width 或含 overflow: hidden，表格可能被裁剪，看起来像“没生效”

用 <col> 定义列宽才是稳定解法

<col> 是专为列级宽度控制设计的语义化元素，优先级高于任何单元格上的 width 声明，且不依赖内容渲染顺序。

• <col> 必须放在 <table> 开始后、<code><thead> 之前<li>只支持 <code>%、px、em 等单位，fr 不可用
• 没写 <col> 的列，宽度由第一行对应单元格的 width 决定
• 示例：

  <table style="width: 100%; table-layout: fixed;">
    <col width="150">
    <col width="25%">
    <col width="1fr"> <!-- 无效，会被忽略 -->
    <thead><tr><th>A</th><th>B</th><th>C</th></tr></thead>
  </table>

小屏下横向溢出怎么处理

纯 table-layout: fixed 在窄屏上极易溢出，不能只靠 CSS 收缩解决。

立即学习“前端免费学习笔记（深入）”；

• 外层加 <div style="overflow-x: auto;">，保证滚动可用
• 小屏媒体查询中可临时切回 table-layout: auto + white-space: nowrap 防折行干扰
• 留一列用 width: 100%（前提是其他列宽度明确），它会自动填满剩余空间
• 慎用 word-break: break-all，破坏可读性；优先考虑 text-overflow: ellipsis + white-space: nowrap + overflow: hidden

真正难的不是写对那几行 CSS，而是决定哪列允许截断、哪列必须可见、是否接受横向滚动——这些权衡没法靠一个属性自动完成。