[分享]css削除table中的间距

CSS 削除 Table 中的间距在 Web 开发中，我们经常会使用 Table 进行数据展示。而 Table 默认情况下会存在一定的间距，影响页面的美观度。下面介绍两种方法来削除 Table 中的间...

CSS 削除 Table 中的间距

在 Web 开发中，我们经常会使用 Table 进行数据展示。而 Table 默认情况下会存在一定的间距，影响页面的美观度。下面介绍两种方法来削除 Table 中的间距。

方法一：

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

上述代码中，border-collapse: collapse; 可以将 Table 边框合并，使得 Table 看起来更加紧凑。而 border-spacing: 0; 则可以设置表格中单元格之间的距离为 0。接着，td, th { padding: 0; margin: 0; } 可以将单元格的内边距和外边距都设置为 0，避免了单元格与 Table 之间的间隔。

方法二：

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

方法二与方法一类似，只是将 border-collapse: collapse; 更改为了 border-collapse: separate;。这样做的效果是所有边框之间会留出 1px 的间隙，与默认情况下的效果相同。但是，使用这种方法需要额外的样式来控制边框的实际宽度。