码迷,mamicode.com
首页 > 其他好文 > 详细

div 实现表格布局

时间:2015-06-07 16:00:40      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:web   html   div   table   layout   

<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;
		text-align: center;
		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;
	}



	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 实现表格布局

标签:web   html   div   table   layout   

原文地址:http://antlove.blog.51cto.com/10057557/1659342

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!