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

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>

　　效果如图所示：