[分享]css中怎么让表格无间距

发布于 2024-11-11 18:47:15

在CSS中，如何让表格无间距呢？接下来让我们来详细了解。

table{
border-collapse: collapse;
}
td, th{
padding: 0;
margin: 0;
}

上面的代码中，我们用了border-collapse: collapse;来让边框无间距，用了padding: 0;和margin: 0;来让单元格无间距。

下面是一个完整的例子：

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse: collapse;
}
td, th{
padding: 0;
margin: 0;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

</body>
</html>

代码中的border-collapse: collapse;让表格的边框无间距，而padding: 0;和margin: 0;则让单元格的内外边距都为0，从而达到了无间距的效果。

至此，我们就已经成功让表格无间距了。

css 教程