border-spacing详解

SSBRQ • 2025-02-17 17:02 • 编程

一、介绍

border-spacing用于控制表格的行列间距大小。该属性值可以为0或正数，单位为px、em等。在使用border-collapse属性时，该属性才有效。如不使用border-collapse属性，则border-spacing属性不会起效。

如果想要设置表格表格的行列间距大小，border-spacing是一个不错的选择。让我们细致地来了解它。

二、border-spacing属性

1. 属性值

border-spacing属性只有一个值，即表格行列的间距大小。

例如：

table {
  border-spacing: 10px;
}

2. 特点

对于使用border-collapse:collapse 的表格， border-spacing属性控制的是边框之间的距离，同时在表格的外部留出间距。而对于使用border-collapse:separate 的表格， border-spacing属性控制的是单元格之间的距离。

3. 兼容性

border-spacing属性在IE8及其以下版本的浏览器中不被支持。

三、示例

1. 带有边框距离的表格

在下面的例子中，表格行列之间存在10px的距离。注意我使用了border-collapse:collapse属性值。如果不使用该属性值，则border-spacing属性不会起作用。

<table style="border-collapse:collapse; border-spacing: 10px;">
  <tr>
    <th>题目</th>
    <th>作者</th>
    <th>发布日期</th>
  </tr>
  <tr>
    <td>JavaScript学习笔记</td>
    <td>Tom</td>
    <td>2020-01-01</td>
  </tr>
  <tr>
    <td>CSS常见问题总结</td>
    <td>Jerry</td>
    <td>2020-02-01</td>
  </tr>
</table>

2. 单元格之间的距离

在下面的例子中，我们有一个表格，该表格使用了border-collapse:separate属性值。此时，border-spacing属性控制的是单元格之间的距离。

<table style="border-collapse:separate; border-spacing: 10px;">
  <tr>
    <td>单元格1-1</td>
    <td>单元格1-2</td>
    <td>单元格1-3</td>
  </tr>
  <tr>
    <td>单元格2-1</td>
    <td>单元格2-2</td>
    <td>单元格2-3</td>
  </tr>
  <tr>
    <td>单元格3-1</td>
    <td>单元格3-2</td>
    <td>单元格3-3</td>
  </tr>
</table>

3. 不同表格对border-spacing属性的影响

在下面的例子中，我们用了两个表格来展示使用不同border-collapse属性值时border-spacing属性的影响。

<table style="border-collapse:collapse; border-spacing: 30px;">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

<table style="border-collapse:separate; border-spacing: 30px;">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

四、总结

border-spacing是控制表格行列间距大小的一种属性，只在使用了border-collapse属性时起作用。它的值可以为0或正数，单位可以是px、em等。当使用border-collapse:collapse时，border-spacing属性控制的是边框之间的距离，同时在表格的外部留出间距。当使用border-collapse:separate时，border-spacing属性控制的是单元格之间的距离。

原创文章，作者：SSBRQ，如若转载，请注明出处：https://www.506064.com/n/351659.html