一、介绍
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属性控制的是单元格之间的距离。