[分享]css两个表格间距

在网页设计中，经常需要使用表格来展示数据。而表格之间的间距也是一个重要的问题。在使用CSS设计表格之间的间距时，需要注意以下两个方面。使用bordercollapse属性控制表格边框的合并table ...

在网页设计中，经常需要使用表格来展示数据。而表格之间的间距也是一个重要的问题。在使用CSS设计表格之间的间距时，需要注意以下两个方面。

使用border-collapse属性控制表格边框的合并

table {
  border-collapse: collapse;
} 

border-collapse属性用于控制表格边框的合并。它有两个可选值：collapse和separate。当设置为collapse时，相邻表格的边框合并，即两个表格之间的边框只显示一次，同时单元格之间的边框也合并。当设置为separate时，边框会分开显示。

使用margin属性控制表格之间的距离

table {
  margin: 20px 0;
} 

margin属性用于控制元素的外边距。使用margin属性可以控制表格之间的距离。在上面的代码中，20px 0表示设置上下边距为20像素，左右边距为0像素。我们也可以单独控制上、右、下、左四个方向的边距，例如：

table {
  margin-top: 10px;
  margin-right: 0;
  margin-bottom: 30px;
  margin-left: 0;
} 

上述代码将控制表格与其它元素之间的距离，比如在表格上下方各设置了10像素和30像素的边距。

以上是两个常用的控制表格间距的方法，我们可以根据不同的需求使用不同的方法来进行表格设计。