CSS:设置单元格间距和单元格填充

使用纯 CSS 可以轻松控制 Cellspacing 和 Cellpadding。
不再需要使用旧的 HTML 属性。

要更改单元格之间的空间,我们可以使用 CSS border-spacing 属性。
要完全折叠边框,我们可以将 border-collapse 设置为折叠。

然而,表格应该很少用于布局目的。
即使我们获得表格数据,我们通常也可以通过使用 flex 和网格技术获得更灵活和可移植的结果。

table {
  border-spacing: 0;
  border-collapse: collapse;
}
table, td {
  border: 1px solid black;
  padding: 0.5rem;
}

为了测试这个 CSS 代码,我们应该尝试创建一个简单的 HTML 表格。
下表没有使用 HTML 属性,而是单独使用 CSS 设置样式:

<table>
 <tr><td>Tim Berners-Lee</td> <td>tim@example.com</td></tr>
 <tr><td>Ian Hickson</td> <td>ian@example.com</td></tr>
</table>
日期:2020-06-02 22:17:34 来源:oir作者:oir