应使用css padding属性为td和th设置内边距，而非过时的cellpadding；padding支持多值语法、响应式单位及媒体查询，且在border-collapse: collapse模式下是唯一可靠方式。

直接给 <td> 和 <code><th> 加 <code>padding

单元格内容离边框太近？不是改 <table> 的属性，而是给 <code><td> 和 <code><th> 设 <code>padding。老式 cellpadding 属性已过时，它只能全局设像素值、无法响应式、也不能单独控制上下左右。

• padding 支持所有单位：px、rem、%（以父 <table> 宽度为基准）、甚至媒体查询 <li>写法示例：<code>td, th { padding: 8px 12px; }（上下 8px，左右 12px）
• 若表格用了 border-collapse: collapse，padding 是唯一可靠方式；此时 border-spacing 已失效
• 别给 <table> 写 <code>padding —— 它对表格整体无效，浏览器会忽略

  border-spacing 失效？先检查 border-collapse

  想调单元格之间的物理间距（比如两列之间空 6px），必须用 border-spacing，但它只在 border-collapse: separate 下生效。90% 的“写了没反应”问题，都因为这个值被其他样式（如 Bootstrap、Normalize.css 或你自己写的全局规则）悄悄覆盖了。

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 显式声明：table { border-collapse: separate; border-spacing: 6px 0; }（第一个值是列间距，第二个是行间距）
  • border-spacing 不支持百分比、负值，也不继承，只能作用于 <table> 元素本身 <li>DevTools 的 “Computed” 面板里确认 <code>border-collapse 真实值，别只看源码有没有写
  • 如果框架强制用了 collapse 又不能改，就放弃物理间隙，改用 padding + 背景色模拟视觉疏密

  行内元素在 <td> 里加 <code>padding 没效果？换思路

  常见错误：<td><span style="padding: 5px">文字</span></td>，发现上下 padding 看不出——不是失效，而是 <span></span> 默认是 display: inline，它的 vertical padding 不推高行高。

  • 直接给 <td> 设 <code>padding，最稳
  • 非要包装子元素？改成 display: inline-block 或 display: block
  • 更轻量的替代：调 line-height，它能可靠撑开单元格高度，且不增加盒模型复杂度
  • 注意：某些旧版 Outlook 邮件客户端会忽略 <style></style> 块里的 td padding，必须用内联样式：<td style="padding: 10px"> <h3>为什么表头和数据行高度不一致？<code>box-sizing 和 border-collapse 得一起看

  加完 padding 后，<th> 比 <code><td> 高一截？或打印预览错位？大概率是这两个属性没协同处理。 <ul> <li>默认 <code>box-sizing: content-box 下，width: 100px; padding: 10px 实际占位 120px；加 box-sizing: border-box 可让 padding 不撑宽

  • border-collapse: separate 时，padding 和 border-spacing 共同影响视觉结果；collapse 时，padding 是唯一可控变量
  • 实际项目中，动手前先打开 DevTools，看 computed styles 里 padding 的 actual 值是否符合预期——比猜快得多
  真正麻烦的从来不是“怎么加”，而是加完之后发现某处留白过大、某列被挤出视口、或者邮件客户端完全不认——这些几乎都卡在 border-collapse 和 box-sizing 的组合行为上。

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