当前位置:Gxlcms > 前端框架 > css怎么设置table表格的边框为单线边框?(代码详解)

css怎么设置table表格的边框为单线边框?(代码详解)

时间:2021-07-01 10:21:17 帮助过:489人阅读

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

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

table,table  td{
	border: 1px solid #000;
}
table  td{
	padding: 10px 30px;
}

1.jpg

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

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

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

<table>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
</table>

效果图:

4.jpg

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

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

table {
width: 200px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}

6.jpg

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

table td {
	padding: 10px 30px;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
}

5.jpg

3、去掉单元格的间隙

table {
	width: 200px;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-spacing: 0;/*去掉单元格间隙*/
}

说明:

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

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

效果图:

3.jpg

总结:以上就是本篇文章所介绍的css table表格单线边框的一种实现方法,希望能对大家的学习有所帮助。更多相关教程请访问: CSS基础视频教程, HTML视频教程,bootstrap视频教程!

以上就是css怎么设置table表格的边框为单线边框?(代码详解)的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行