Html 如何使用 CSS 在表格中设置单元格填充和单元格间距？

How to set cellpadding and cellspacing in table with CSS?

提问by Sudipa Sengupta

Can someone tell me how to change table cellpadding and cellspacing like you can do it in html with:

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

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

But how is it done with css?

但是css是怎么做的呢？

回答by kapa

Use paddingon the cells and border-spacingon the table. The former will give you cellpadding while the latter will give you cellspacing.

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

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

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

jsFiddle Demo

jsFiddle 演示

回答by Milche Patern

The padding inside a table-divider (TD) is a padding property applied to the cell itself.

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

CSS

CSS

td, th {padding:0}

The spacing in-between the table-dividers is a space between cell borders of the TABLE. To make it effective, you have to specify if your table cells borders will 'collapse' or be 'separated'.

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

CSS

CSS

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

Try this : https://www.google.ca/search?num=100&newwindow=1&q=css+table+cellspacing+cellpadding+site%3Astackoverflow.com( 27 100 results )

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

回答by Nitesh

Here is the solution.

这是解决方案。

The HTML:

HTML：

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

The CSS:

CSS：

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

Hope this helps.

希望这可以帮助。

EDIT

编辑

td, th {padding:0}