CSS 对 HTML 格式化：实现单元格间的真正间距

在本文中，我们将介绍如何使用CSS来实现单元格与单元格之间的真正间距，而不是单元格与任意元素之间的间距。

阅读更多：CSS 教程

问题描述

在使用HTML的表格进行布局时，我们经常会遇到一个问题：默认情况下，浏览器会在单元格与任意元素之间添加一些间距，而不是在单元格之间添加间距。这可能导致布局上的问题，特别是当我们尝试将多个单元格放置在一行或一列时。

下面是一个示例表格，展示了这个问题：

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>

在默认情况下，这个表格的单元格之间会有一些间距，而我们希望的是单元格之间没有间距。

解决方法

要解决这个问题，我们可以使用CSS的border-collapse属性。该属性设置表格的边框是否折叠为单一边框，从而实现单元格之间的真正间距。

首先，我们需要在CSS中将表格的border-collapse属性设置为collapse：

table {
  border-collapse: collapse;
}

然后，我们可以通过设置单元格的padding属性来控制单元格内部的间距，而不是通过设置单元格与其他元素之间的间距。例如，我们可以将单元格的左右内边距设置为10像素，将上下内边距设置为5像素：

td {
  padding: 5px 10px;
}

现在，我们重新运行示例表格，可以看到单元格之间没有间距，同时单元格内部的间距也得到了控制。

示例说明

为了进一步说明我们的解决方法，我们将创建一个包含多行和多列的表格，并使用CSS来控制单元格之间的间距。

首先，我们创建一个包含5行和5列的表格：

<table>
  <tr>
    <td>Cell 1-1</td>
    <td>Cell 1-2</td>
    <td>Cell 1-3</td>
    <td>Cell 1-4</td>
    <td>Cell 1-5</td>
  </tr>
  <tr>
    <td>Cell 2-1</td>
    <td>Cell 2-2</td>
    <td>Cell 2-3</td>
    <td>Cell 2-4</td>
    <td>Cell 2-5</td>
  </tr>
  <tr>
    <td>Cell 3-1</td>
    <td>Cell 3-2</td>
    <td>Cell 3-3</td>
    <td>Cell 3-4</td>
    <td>Cell 3-5</td>
  </tr>
  <tr>
    <td>Cell 4-1</td>
    <td>Cell 4-2</td>
    <td>Cell 4-3</td>
    <td>Cell 4-4</td>
    <td>Cell 4-5</td>
  </tr>
  <tr>
    <td>Cell 5-1</td>
    <td>Cell 5-2</td>
    <td>Cell 5-3</td>
    <td>Cell 5-4</td>
    <td>Cell 5-5</td>
  </tr>
</table>

接下来，我们在CSS中将表格的border-collapse属性设置为collapse，并设置单元格的padding属性：

table {
  border-collapse: collapse;
}

td {
  padding: 10px;
}

现在，我们重新运行代码，可以看到每个单元格之间都有10像素的间距。

总结

通过使用CSS的border-collapse属性，我们可以轻松地实现单元格与单元格之间的真正间距。同时，通过设置单元格的padding属性，我们可以控制单元格内部的间距。这些方法对于创建具有复杂布局的表格非常有用，能够提高我们的网页设计效果。希望本文对您有所帮助！