iLeichun

当前位置: 首页 > CSS

css设置table表格的边框为单线边框的几种方式

分类:CSS   来源:网络   时间:2022-03-24 15:29:08

方式一、

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

table {

width: 300px;

border-top: 1px solid #999;

border-left: 1px solid #999;

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

}


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

table td {

padding: 5px 30px;

border-bottom: 1px solid #999;

border-right: 1px solid #999;

}


说明:

border-spacing 属性:可以设置相邻单元格的边框间的距离(仅用于“边框分离”模式),即 border-collapse 为 separate 时(separate 是默认值)。

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



方式二、

table {

width: 300px;

border-collapse: collapse;

}


table td {

padding: 5px 30px;

border: 1px solid;

}


更多