css怎么设置table表格的边框为单线边框？（代码详解）

table表格边框怎么设置为单线边框？本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们来看看给table表格添加边框后，它的默认效果：

1

2

3

4

5

6

table,table  td{

    border: 1px solid #000;

}

table  td{

    padding: 10px 30px;

}

可以看出，table表格是以双线的形式显示的，那么如何让table表格以单线边框的方式现实中html页面上？下面我们就通过简单的代码示例来讲解一种table表格设置单线边框的方法。

css设置单线边框的方法介绍：

我们先要在html页面建立table表格，代码如下：

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

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

        内容

效果图：

table表格建好了，下面我们就看看用css怎么给table表格添加单线边框。

1、首先给整个table表格的外边框加上左边框和上边框

1

2

3

4

5

table {

width: 200px;

border-top: 1px solid #999;

border-left: 1px solid #999;

}

2、在给table表格里的每个单元格添加下边框和右边框

1

2

3

4

5

table td {

    padding: 10px 30px;

    border-bottom: 1px solid #999;

    border-right: 1px solid #999;

}

3、去掉单元格的间隙

1

2

3

4

5

6

table {

    width: 200px;

    border-top: 1px solid #999;

    border-left: 1px solid #999;

    border-spacing: 0;/*去掉单元格间隙*/

}

说明：

border-spacing 属性：可以设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

当我们设置border-spacing: 0;时，就表示table表格中每个相邻单元格的边框间（水平和垂直方向）的距离都为0。

效果图：

总结：以上就是本篇文章所介绍的css table表格单线边框的一种实现方法，希望能对大家的学习有所帮助。