首页 » CSS » 合并表格边框线

合并表格边框线

原文 http://blog.csdn.net/m0_37754657/article/details/79085854

2018-01-18 02:00:14阅读(448)

方法一:在html中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		table{
			width:800px; 
			border:1px solid blue;
		}
		td{
			border:1px solid blue;
		}
	</style>
</head>
<body>
	<table rules="all">
	<tr>
		<td>序号</td>
		<td>姓名</td>
		<td>电话</td>
	</tr>
	<tr>
		<td>0001</td>
		<td>小二</td>
		<td>1234567890</td>
	</tr>
	<tr>
		<td>0002</td>
		<td>小三</td>
		<td>1234567890</td>
	</tr>
</table>
</body>
</html>
在 table 标签中添加属性 rules="all"  可合并表格边框线

方法二:在css中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		table{
			width:800px; 
			border:1px solid blue;
			border-collapse:collapse; 
		}
		td{
			border:1px solid blue;
		}
	</style>
</head>
<body>
	<table>
	<tr>
		<td>序号</td>
		<td>姓名</td>
		<td>电话</td>
	</tr>
	<tr>
		<td>0001</td>
		<td>小二</td>
		<td>1234567890</td>
	</tr>
	<tr>
		<td>0002</td>
		<td>小三</td>
		<td>1234567890</td>
	</tr>
</table>
</body>
</html>

在 table 中添加属性 border-collapse:collapse 

不信?你试试

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹