根本原因是未启用table-layout: fixed；浏览器默认table-layout: auto会根据内容（如长url、无空格字符串）动态推算列宽，使width声明仅作参考而非约束，必须在上显式设置table-layout: fixed并配合width（如100%）才能生效。

为什么加了 width 还是被内容撑开

根本原因是没启用 table-layout: fixed。浏览器默认用 table-layout: auto，它会扫描整张表所有单元格内容（包括长 URL、UUID、无空格字符串）来推算列宽，width 声明在这一阶段只是参考，不是约束。

即使你给 <td> 写了 <code>style="width: 100px"，只要里面塞进 "a1b2c3d4e5f6g7h8i9j0" 这种长串，整列照样被拉宽——因为 auto 模式下，内容宽度具有最高优先级。

• 必须把 table-layout: fixed 直接加在 <table> 元素上，写在父容器或 CSS 类里无效 <li> <code>table-layout: fixed 不继承，也不能靠更宽泛的选择器覆盖（比如 table.my-table 可以，但 .container table 容易被其他规则干扰）
• 仅设 table-layout: fixed 不够，还得配 width（如 width: 100% 或具体像素值），否则部分浏览器会退化回 auto 行为

列宽该设在 还是第一行 /

<col> 是最干净、最可控的方式。它在渲染前就定义列轨道，不依赖 DOM 结构，也不受内容、min-width 或重置样式干扰。

第一行 <th> 或 <code><td> 的 <code>width 也能生效，但有风险：如果首行用了 colspan，或被某些 CSS 框架的通用样式覆盖（比如 th { width: auto }），列宽就可能错乱。

• 推荐写法：<colgroup> <col width="120"> <col width="25%"> </colgroup>
• 避免混用单位：同一表格内不要同时用 px 和 %，某些 Android WebView 会 fallback 到 auto
• <col> 不支持 fr 单位，只认 px、%、auto
• 后续行的 <td> 上设 <code>width 会被忽略，别白费劲

  内容溢出后文字不换行怎么办

  启用 table-layout: fixed 后，单元格内文字默认不折行——这不是 bug，是规范行为。列宽锁定了，但内容区仍按默认 white-space: normal（实际多数重置样式会设成 nowrap），导致长文本横向溢出甚至压垮隔壁列。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 强制换行：加 word-break: break-all（适合日志 ID、哈希值等纯机械字符串）
  • 友好换行：加 overflow-wrap: break-word（旧名 word-wrap: break-word，优先保单词完整）
  • 两者都写更稳妥：word-break: break-all; overflow-wrap: break-word;
  • 确保 <td> 有 <code>white-space: normal，别被全局样式覆盖
  • 如果要单行省略号，得额外加：white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;

  多个表格对不齐的隐藏原因

  看起来都是 width: 100% + table-layout: fixed，但列宽就是不一致？大概率是这些细节没对齐：

  • 一个表用了 <col>，另一个靠第一行 <th> 的 <code>width，列宽计算逻辑不同
  • 边框模式不统一：border-collapse: collapse 必须两边都设，否则 separate 下的 border-spacing 会额外占空间
  • 字体或字号不同：哪怕只差 1px 字号，在 fixed 模式下也会影响内容区渲染宽度
  • 父容器影响：Safari 对套在 display: inline-block 里的 <table> 有时会忽略 <code>table-layout: fixed，换成 block 或加 vertical-align: top

    最麻烦的是：一旦用了 table-layout: fixed，列宽就彻底脱离内容弹性——后端返回超长字段时，前端无法靠 CSS 自动适应，得提前约定长度或服务端截断。

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