css如何设置表格间距

在CSS中，可以通过设置表格的属性来设置表格间距，包括表格边框间距以及表格内部单元格间距。

表格边框间距

表格边框间距是指表格边框与相邻元素之间的距离，可以使用border-spacing属性来设置。这个属性需要设置两个值，分别表示水平和垂直间距，例如：

table {

  border-spacing: 10px 5px;

}

这个例子中，水平间距为10像素，垂直间距为5像素。如果只想设置一个方向的间距，可以只指定一个值，例如：

table {

  border-spacing: 10px 0;

}

这个例子中，水平间距为10像素，垂直间距为0。

表格内部单元格间距

表格内部单元格间距是指单元格之间的距离，可以使用cellspacing属性来设置。这个属性只需要设置一个值，表示水平和垂直间距相等，例如：

table {

  cellspacing: 10px;

}

这个例子中，单元格之间的间距为10像素。如果想要只设置水平或者垂直间距，可以使用cellpadding属性，分别设置padding-left和padding-right或者padding-top和padding-bottom。

注意事项

需要注意的是，某些浏览器可能不支持border-spacing属性，例如IE6-IE7。如果需要兼容老版本的浏览器，可以使用border-collapse属性来代替border-spacing，例如：

table {

  border-collapse: separate;

  border-spacing: 10px;

}

这个例子中，将border-collapse属性设置为separate，表示单元格的边框不合并。同时设置border-spacing为10像素，实现了表格边距的效果。

总结

通过设置border-spacing属性和cellspacing属性，可以实现表格间距的设置。需要注意的是不同浏览器兼容性的问题，以及区分边框间距和单元格间距的概念。