必须设置 table-layout: fixed 才能防止文字撑开表格，配合 table 宽度和 col 元素精确控制列宽，再通过 word-break 或 text-overflow 控制单元格内容换行或省略。

table 设置固定宽度后文字仍撑开怎么办

直接给 table 设 width 或 max-width 不管用，是因为默认的 table-layout 是 auto —— 浏览器会先看内容再算列宽，文字一长就强行撑开。

• 必须显式设置 table-layout: fixed，让浏览器按 CSS 宽度分配列宽，不看内容
• width 要设在 table 上（不是父容器），且建议用具体值（如 400px 或 100%）
• 每列最好通过 col 或第一行 th/td 设置宽度，否则固定布局下各列均分，容易错位

如何用 col 控制每列宽度并防撑开

col 是唯一能精确控制列宽、且不影响语义和渲染顺序的方式。它在 table 内部最上方声明，优先级高于 th/td 的 width。

• 把 col 放在 thead 之前（或 caption 之后），例如：

  <table style="table-layout: fixed; width: 500px;">
    <col width="120">
    <col width="180">
    <col width="200">
    <thead><tr><th>姓名</th><th>邮箱</th><th>备注</th></tr></thead>
    <tbody><tr><td>张三</td><td>zhang@example.com</td><td>超长文字测试文本不会撑开表格</td></tr></tbody>
  </table>

• 宽度单位可用像素、百分比（如 width="30%"），但不要混用；auto 在 fixed 布局下失效
• 如果某列内容实在太多，配合 overflow: hidden + text-overflow: ellipsis 更稳妥（需设 white-space: nowrap）

td 内容换行/截断的实操写法

光靠 table-layout: fixed 只能锁列宽，内容是否溢出还得靠单元格样式控制。

Wechat HTML Publisher

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

下载

• 强制换行：给 td 加 word-break: break-word（兼容性好）或 overflow-wrap: break-word
• 单行省略：需要三件套 —— white-space: nowrap + overflow: hidden + text-overflow: ellipsis，且该 td 必须有明确宽度（来自 col 或自身 width）
• 避免用 td { width: 100px } 单独设宽，它在 auto 布局下无效，在 fixed 下可能被 col 覆盖，优先级混乱

常见错误：flex 或 inline-block 套 table 的坑

有人试图用 display: flex 包裹 table 来“约束宽度”，结果发现表格根本不受控 —— 因为 table 是独立的渲染上下文，flex 容器对它的尺寸约束非常弱。

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

• 不要给 table 父元素加 display: flex 或 inline-block 来“限制宽度”，这只会引发意外缩放或滚动条
• 真正起作用的只有三层：① table-layout: fixed ② table 自身宽度 ③ col 或首行单元格宽度
• 响应式场景下，width: 100% + min-width 比固定像素更安全，但依然要配 table-layout: fixed

固定布局下，列宽由 col 或首行决定，后续行内容再长也不会影响结构 —— 这是唯一稳定可控的路径。别绕开它去试别的 hack。