css如何设置table表格的边框为单线边框
这篇文章将为大家详细讲解有关css如何设置table表格的边框为单线边框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联于2013年成立,先为曲周等服务建站,曲周等地企业,进行企业商务咨询服务。为曲周企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
首先我们来看看给table表格添加边框后,它的默认效果:
table,table td{ border: 1px solid #000; } table td{ padding: 10px 30px; }
可以看出,table表格是以双线的形式显示的,那么如何让table表格以单线边框的方式现实中html页面上?下面我们就通过简单的代码示例来讲解一种table表格设置单线边框的方法。
css设置单线边框的方法介绍:
我们先要在html页面建立table表格,代码如下:
内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 |
效果图:
table表格建好了,下面我们就看看用css怎么给table表格添加单线边框。
1、首先给整个table表格的外边框加上左边框和上边框
table { width: 200px; border-top: 1px solid #999; border-left: 1px solid #999; }
2、在给table表格里的每个单元格添加下边框和右边框
table td { padding: 10px 30px; border-bottom: 1px solid #999; border-right: 1px solid #999; }
3、去掉单元格的间隙
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表格的边框为单线边框就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网页标题:css如何设置table表格的边框为单线边框
网页地址:http://scyanting.com/article/pepisg.html