css中怎么让表格无间距

发表于前端技术学习版块 css,教程

在CSS中，如何让表格无间距呢？接下来让我们来详细了解。table{ border-collapse: collapse; } td, th{ padding: 0; margin: 0; } 上面的

在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，从而达到了无间距的效果。

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

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。