div 实现表格布局

<html>
<head>
<style>
	div.table{
		font-size:0;
		width:400px;
		border-top-style: solid;
		border-top-width: 1px;
		border-left-style: solid;
		border-left-width: 1px;
		margin:0 auto;
	}


	div.table>div>div{
		font-size:18;
		border-right-width: 1px;
		border-right-style: solid;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		width:199px;
		display:inline-block;
		margin:0px;
		padding:0px;
		text-align: center;
	}



	div.table>div:first-child{
		background-color:pink;
	}

</style>
</head>
<body>
<div class="table" >
	<div>
		<div>ID</div>
		<div>Name</div>
	</div>

	<div>
		<div>001</div>
		<div>xiaohong</div>
	</div>

	<div>
		<div>002</div>
		<div>xiaohong</div>
	</div>

		<div>
		<div>003</div>
		<div>xiaohong</div>
	</div>

	<div>
		<div>004</div>
		<div>xiaohong</div>
	</div>

	<div>
		<div>005</div>
		<div>xiaohong</div>
	</div>

</div>

</body>
</html>


你可能感兴趣的:(div 实现表格布局)