css：border-spacing属性（表格边框间距）的示例代码分享

程序员文章站 2022-04-25 23:40:00

...

一、border-spacing 属性

我们知道表格加入边框默认情况下是如下图那样的：

我们在上一节讲解了如何合并表格边框（消除表格边框间距）。但是在实际开发中，我们有可能要设置一下表格边框的间距。

在CSS中，我们使用border-spacing属性来定义表格边框间距。

语法：

border-spacing:像素值;

说明：

该属性指定单元格边界之间的距离。当只指定了1个像素值时，这个值将作用于横向和纵向上的间距；当指定了2个length值时，第1个作用于横向间距，第2个作用于纵向间距。

在CSS初学阶段，全部都是使用像素作单位，在CSS进阶中我们会深入讲解其他CSS单位。

举例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>border-spacing属性</title>
    <style type="text/css">
        table,th,td{border:1px solid gray;}
        table{border-spacing:5px 10px }
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
        <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在浏览器预览效果如下：

css：border-spacing属性（表格边框间距）的示例代码分享

分析：

"border-spacing:5px 10px"定义了单元格之间水平方向的间距为5px，垂直方向的间距为10px。

border-spacing属性跟上节课学到的border-collapse属性一样，只需要在table元素设置就可以生效，没必要在th、td这些元素中设置，造成代码冗余。

以上就是css：border-spacing属性（表格边框间距）的示例代码分享的详细内容，更多请关注其它相关文章！

上一篇： PHP购物车类代码

下一篇：五个步骤告诉你如何开发Web应用程序

css：border-spacing属性（表格边框间距）的示例代码分享

html+css合并表格边框的示例代码

CSS中关于position的属性以及示例代码分享