如何使用 CSS 在表格中设置单元格填充和单元格间距？ [复制]答案

【问题标题】：How to set cellpadding and cellspacing in table with CSS? [duplicate]如何使用 CSS 在表格中设置单元格填充和单元格间距？ [复制]
【发布时间】：2013-05-01 09:56:35
【问题描述】：

有人可以告诉我如何更改表格单元格填充和单元格间距，就像您可以在 html 中那样：

<table cellspacing="0" cellpadding="0">

但是用 css 是怎么做的呢？

【问题讨论】：

标签： html css

【解决方案1】：

表格分隔符 (TD) 内的填充是应用于单元格本身的填充属性。

CSS

td, th {padding:0}

表格分隔符之间的间距是表格单元格边框之间的空间。为了使其有效，您必须指定表格单元格的边框是“折叠”还是“分离”。

CSS

table, td, th {border-collapse:separate}
table {border-spacing:6px}

试试这个：https://www.google.ca/search?num=100&newwindow=1&q=css+table+cellspacing+cellpadding+site%3Astackoverflow.com（27 100 个结果）

【讨论】：

border-collapse:separated 无效。应该分开（没有“d”）
@Talon 这很有用，谢谢

【解决方案2】：

在单元格上使用padding，在表格上使用border-spacing。前者会给你单元格填充，而后者会给你单元格间距。

table { border-spacing: 5px; } /* cellspacing */

th, td { padding: 5px; } /* cellpadding */

jsFiddle Demo

【讨论】：

更新：添加了一个更能说明问题的演示

【解决方案3】：

这里是solution。

HTML：

<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            123
        </td>
    </tr>
</table>

CSS：

table { 
      border-spacing:0; 
      border-collapse:collapse;   
    }

希望这会有所帮助。

编辑

td, th {padding:0}

【讨论】：

单元格间距和内边距是表格内单元格的属性。我认为在 td 上设置边距和填充会更准确。
这里是相同的小提琴jsfiddle.net/mVSaa - @Darkwater23
我同意你的观点。尝试，测试并最终编辑了小提琴。 jsfiddle.net/mVSaa/1 - @Darkwater23