如何使用 CSS 从表格中删除单元格间距？

在网页开发中，表格是一种常见的数据展示方式。然而，默认情况下，表格中的单元格之间会有一定的间距，这可能不符合某些设计要求。幸运的是，使用 CSS 可以很容易地删除表格中的单元格间距。

使用 border-collapse 属性

CSS 提供了一个 border-collapse 属性，该属性用于控制表格中边框的合并和间距。通过设置 border-collapse: collapse;，我们可以将单元格边框合并，并删除单元格之间的间距。

table {
  border-collapse: collapse;
}

这将应用于所有表格元素，如果只需要应用于特定的表格，请为其指定相应的 CSS 类名或 ID。

实例

下面是一个简单的例子，演示如何使用 CSS 删除表格中的单元格间距：

<style>
table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  padding: 10px;
}
</style>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

在上面的例子中，padding: 10px; 用于设置单元格的内边距，border: 1px solid black; 用于设置单元格的边框。设置了 border-collapse: collapse; 后，单元格之间的间距被删除。

注意：border-collapse 属性不适用于 <thead>、<tbody> 和 <tfoot> 元素，因为它们的边框合并效果由浏览器自动处理。

希望这个简单的介绍能够帮助你了解如何使用 CSS 从表格中删除单元格间距。通过控制 border-collapse 属性，你可以自由地定制表格的边框样式和间距。