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

Question

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

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

但是它是如何用 css 完成的呢？

Answer 1

padding在单元格和border-spacing桌子上使用。前者会给你cellpadding，而后者会给你cellspacing。

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

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

jsFiddle 演示

Answer 2

表格分隔符 (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 个结果）

Answer 3

这是解决方案。

的HTML：

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

CSS：

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

希望这可以帮助。

编辑

td, th {padding:0}