table中使用collapse消除重复的边框问题

最新推荐文章于 2025-05-16 16:53:04 发布

转载最新推荐文章于 2025-05-16 16:53:04 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jt789/p/4867523.html

本文介绍了一种解决HTML表格中出现重复边框的方法，通过使用border-collapse样式属性设置为collapse，可以有效避免表格单元格间出现多余边框的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table加边框时，有时候有的地方是一条线，有的地方是两条线，非常难看。我们可以使用style="border-collapse: collapse;"消除重复的边框

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>


	<style type="text/css">
		table{
			width: 100%;
		}
		table tr td {
			border: solid 1px black;
			text-align: center;
		}
	</style>
	<body>
		<table style="border-collapse: collapse;">
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
		</table>
	</body>

</html>

　　效果如图所示：