CSS如何设置表格边框间的距离?border-spacing属性的使用


本文摘自PHP中文网,作者青灯夜游,侵删。

在CSS中,border-spacing属性用于表格的边框在“分离”的状态下,设置相邻单元格的边框间的距离。下面本篇文章就来带大家了解一下border-spacing属性的使用方法,希望对大家有所帮助。

CSS border-spacing属性

border-spacing属性会在表格边框“分离”时,设置行和单元格的边框在横向和纵向上的间距。【视频教程推荐:CSS教程】

它可以有1~2个length值:

● 如果提供全部两个length值时,第一个作用于横向间距,第二个作用于纵向间距。

● 如果只提供一个length值时,这个值将作用于横向和纵向上的间距。

说明:该border-spacing属性的作用等同于HTML标签属性cellspacing。

注:只有当表格边框各自独立(即border-collapse属性设置separate时)此属性才起作用。

CSS border-spacing属性的使用示例

下面通过简单代码示例来看看border-spacing属性是如何设置表格边框间的距离:

示例1:在设置border-collapse: collapse;时:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <style>

            table,

            td,

            th {

                border: 1px solid black;

            }

            td,th{

                padding: 5px 20px;

            }

             

            #table1 {

                border-collapse: collapse;

                border-spacing: 15px;

                 

            }

        </style>

    </head>

 

    <body>

        <h2>border-spacing: 15px:</h2>

        <p>使用“border-collapse:collapse”时,border-spacing属性无效:</p>

        <table id="table1">

            <tr>

                <th>姓名</th>

                <th>年龄</th>

            </tr>

            <tr>

                <td>Peter</td>

                <td>20</td>

            </tr>

            <tr>

                <td>Lois</td>

                <td>20</td>

            </tr>

        </table>

    </body>

 

</html>

效果图:

2.jpg

示例2:

阅读剩余部分

相关阅读 >>

sass系统是什么

css如何实现倒计时翻页动画

关于css中的类名问题的介绍

css如何让div隐藏

css如何使用important

css 如何实现让文字滑入的方式

css每条声明由一个什么组成

css圣杯布局和双飞翼布局的区别是什么?

css设置背景透明度有什么方式

css中如何设置背景图像

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...