根本解法是同时设置 table { border-collapse: collapse; } 和 td, th { box-sizing: border-box; padding: 12px; }，否则 padding 因分离边框或 content-box 盒模型被掩盖。
table { border-collapse: collapse } 必须配合 td { box-sizing: border-box }
只写 border-collapse: collapse 不会自动让 padding 可见，反而容易让内容被压缩或换行。根本原因是：collapse 模式下边框合并了，但 td 默认仍用 content-box 盒模型，此时你设的 width: 100px + padding: 12px + border: 1px 会算出 126px 总宽，而表格布局引擎常强制截断，导致 padding “消失”。
必须显式加这一句：
td, th { box-sizing: border-box; padding: 12px; }
-
box-sizing: border-box让width包含padding和border，内容区自动收缩，不撑破列宽 - 别只给
table设box-sizing——它不影响子元素，td才是承载 padding 的主体 - 即使项目已全局用了
* { box-sizing: border-box }，也建议显式加到td, th，因为部分老版 reset（如 normalize.css）会重置该规则
为什么写了 td { padding: 12px } 却没反应
这不是 CSS 被忽略，而是以下任一原因在起作用：
-
table没设border-collapse: collapse，浏览器按默认separate模式渲染，此时border-spacing（等效于旧cellspacing）会覆盖 padding 的视觉表现 -
td有固定width但没配box-sizing: border-box，padding 只能往内容区外“撑”，表格引擎直接裁剪或压缩文本 - 某些 UI 库（如 Ant Design）内部用
div模拟表格，此时border-collapse天然无效——得看真实 DOM 是否含原生table标签
border-collapse 写在 tr 或 td 上完全无效
border-collapse 只对 table 元素生效，写在 tr、td、div 或外层容器上，浏览器会静默忽略。
常见错误写法：
td { border-collapse: collapse; } /* ❌ 无任何效果 */
正确写法：
table { border-collapse: collapse; }
td, th { border: 1px solid #ccc; padding: 8px; }
- collapse 模式下，边框合并效果只有在
td和th显式定义了border时才可见 - 如果只想有内边距、不要可见边框，仍需设透明边框：
border: 1px solid transparent，否则合并逻辑可能退化 - 父容器设了
display: block会让table失去表格语义，border-collapse直接失效
响应式表格里 padding 突然变小或错位
当配合 table-layout: fixed 或隐藏列（visibility: collapse）时，列宽重算容易挤压 padding，尤其在小屏下。
- 给
td加min-width: 0，防止长单词或 URL 强行撑开列宽，反向压缩 padding - 避免在
col或colgroup上设width同时又在td写padding——两者冲突时，浏览器优先保列宽，padding可能被裁掉 - 打印或 PDF 导出时，某些引擎对 collapse 边框的宽度取舍逻辑不同，导致粗细不一致；若需稳定输出，建议统一用
border: 1px solid #000并显式声明box-sizing
实际调试中，最常被忽略的一点是：border-collapse 再正确，也救不了一个没被父容器“托住”的表格——比如浮动塌陷、overflow: hidden 强撑高却意外裁剪内容。先确保表格 DOM 位置稳定，再调样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
