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

最新推荐文章于 2022-11-11 16:39:38 发布

原创最新推荐文章于 2022-11-11 16:39:38 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#边框合并 #css #div #前端

Div+Css 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了HTML中表格边框的两种合并方法：通过设置table标签的cellspacing属性为0来实现边框合并成粗线条，以及使用CSS的border-collapse: collapse属性来使相邻边框合并成一条细线。

一段简单的代码：

	<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>