3.边框合并问题和cellspacing的用法

最新推荐文章于 2022-10-08 17:45:01 发布

neilro

最新推荐文章于 2022-10-08 17:45:01 发布

阅读量383

点赞数

分类专栏： Div+Css 文章标签：边框合并 css div 前端

本文链接：https://blog.csdn.net/neilro/article/details/79069628

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

一段简单的代码：

	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>

如果只给table加边框的话是这样的。

		table{
			width:300px;
			height:500px;
			border:1px solid red;
		}

效果：

如果给td标签也加上边框：

		td{
			border:1px solid red;
		}

效果：

那么问题就来了：如何让单元格的边框合并在一块？问题有两种解决思路。

①.在table之中加cellspacing=0（将单元格之间的距离变小）

	<table cellspacing="0">
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
……

效果：

将会变成粗线条，就是简单的两根线条合在一块变粗线条。

②.利用Css样式的border-collapse: collapse;来合并边框

		table{
			width:300px;
			height:500px;
			border:1px solid red;
			border-collapse: collapse;
		}

效果：

就能将两根细线合并成一根细线。

完整的代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>边框合并</title>
	<style type="text/css">
		table{
			width:300px;
			height:500px;
			border:1px solid red;
			border-collapse: collapse;
			/*使用border-collapse: collapse;可以将边框合并成一根线*/
		}
		td{
			border:1px solid red;
		}
	</style>
</head>
<body>
	<!--table之中加cellspacing=0将会合并成粗线条-->
	<table cellspacing="0">
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>
</html>

neilro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.边框合并问题和cellspacing的用法

一段简单的代码：如果只给table加边框的话是这样的。 table{ width:300px; height:500px; border:1px solid red; }效果：如果给td标签也加上边框： td{ border:1px
复制链接

扫一扫