表格中padding“失效”是因table-layout:fixed下内容不换行挤压所致，需同时设置table-layout:fixed、width:100%、box-sizing:border-box及word-break:break-word。

直接加 box-sizing: border-box 不够，表格单元格（td、th）在 table-layout: fixed 下会“吃掉” padding，必须配合列宽控制和内容换行策略才能真正稳住。

为什么 padding 在表格里看起来“失效”了

不是没生效，是被视觉截断了。当 table-layout: fixed 启用后，列宽被硬性锁定，而单元格内长文本（比如 URL、无空格字符串）又拒绝换行，就会把 padding 区域强行挤压甚至覆盖——你在开发者工具里能看到 computed padding 值是对的，但渲染区域被内容顶到了边框上。

• 检查是否误用了 white-space: nowrap 或 overflow: hidden，它们会阻止换行，加剧挤压
• td 默认是 display: table-cell，它的盒模型对 box-sizing 的响应不如块级元素直接，必须显式声明
• 如果父 table 没设明确宽度（如 width: 100%），fixed 模式可能退化为 auto，导致列宽浮动，padding 表现不稳定

必须同时设置的三项 CSS 规则

单靠一个属性解决不了，这三者要一起上：

• 给 table 设 table-layout: fixed 和 width: 100%
• 给 td、th 显式写 box-sizing: border-box（不能只靠全局通配符，table-cell 元素有时会忽略继承）
• 加 word-break: break-word 或 overflow-wrap: break-word，让长内容主动折行，给 padding 留出可视空间

table {
  table-layout: fixed;
  width: 100%;
}
td, th {
  box-sizing: border-box;
  padding: 8px 12px;
  word-break: break-word;
}

col 元素比第一行 td 更可靠地定义列宽

很多人靠第一行 td 的 width 属性定列宽，但动态渲染或 JS 插入数据时容易失效。用 是更稳定的方案，它在 DOM 解析早期就参与布局计算：

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

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

下载

• 的 width 优先级高于 td 的 width，且不受内容影响
• 配合 max-width + overflow: hidden + text-overflow: ellipsis 可安全处理单行标题类单元格
• 避免给 td 写 width，否则和 col 冲突，浏览器行为不一致

ID	名称	描述

调试时最容易漏掉的两个点

就算上面都写了，还是撑开？先盯住这两处：

• 检查 td 里是否嵌套了 div、span 等元素，它们默认仍是 content-box，会从单元格内部再次撑开 —— 对这些内嵌元素也加 box-sizing: border-box
• 确认没有全局重置样式（比如某些 UI 库）把 table 或 td 的 display 改成了 block 或 inline-table，这会让 table-layout 失效

真要快速验证，临时把 td 改成 display: block 看 padding 是否正常——这只是调试手段，别上线。

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