[分享]css中定义单元格间距

CSS（Cascading Style Sheets）是一种用于展现HTML或XML等文档样式的语言。通过CSS，我们可以定义文档中各个元素的样式，包括字体、颜色、大小、位置等。其中，CSS还有一个非...

CSS（Cascading Style Sheets）是一种用于展现HTML或XML等文档样式的语言。通过CSS，我们可以定义文档中各个元素的样式，包括字体、颜色、大小、位置等。其中，CSS还有一个非常重要的属性——border-spacing，用于定义表格中单元格之间的距离。

table {
  border-spacing: 10px; /* 定义单元格间距为10px */
} 

border-spacing属性可以以像素或百分比的形式定义距离大小，也可以定义水平和垂直方向上的距离值。此外，我们还可以为不同的表格单元格设置不同的距离值，方法如下：

table {
  border-collapse: separate; /* 设置为独立边框模式 */
}
td {
  border-spacing: 5px; /* 定义单元格间距为5px */
} 

需要注意的是，当设置了border-collapse属性并将其值设为separate时，会取消边框合并的效果。此时，我们才能为每个单元格设置不同的间距值。否则，所有单元格之间的距离都将相同。

通过上述方法，我们可以很方便地为表格定义单元格间距，从而美化表格的显示效果。