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>

  效果如图所示:

 

table中使用collapse消除重复的边框问题_第1张图片

你可能感兴趣的:(table中使用collapse消除重复的边框问题)