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;
		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>
时间: 2024-10-03 17:30:14

div 实现表格布局的相关文章

浅谈分析表格布局与Div+CSS布局的区别

(1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表格下载完毕后才能显示所有内容,所有表格布局浏览速度较慢[2]. (2)CSS+DIV布局 通常要实现比较精确和自适应的层布局需要设置层的样式,即用CSS控制层的位置.CSS+DIV布局采用Div来定位,通过Div的border(边框).padding(填充).margin(边界)和Float(浮动)

3月23.CSS表格布局

360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:100px; width:900px; margin:10px; top:100px ; left:180px; position:absolute; } .bt2{ border:#309 solid 1px; height:50px; width:900px; margin:10px; top:220px;

bootstrap16-上下文表格布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>上下文表格布局</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <

bootstrap17-响应式表格布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>响应式表格布局</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <

[div+css]网站布局实例二

重点: 合理应用"xhtml标签"建立良好的页面结构 拿到一份"设计方案"的效果图后不要立即开始编码,而是要 首先理清"各元素之间的关系"; 然后思考"以什么标签来组织所需表现的内容". ** 分析页面的基本构成,主要分成5区域: 上部LOGO; 导航菜单; 左侧边栏; 右侧内容; 底部版权区. ** 布局规划: 上部LOGO + 导航菜单 => 头部元素 =>置于header层; 左侧边栏sidebar+右侧边栏

基于CSS属性display:table的表格布局的使用

项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的display:table的DIV,然后在嵌套的表格DIV内部通过控制行列数和行列的高度,实现单元格合并.个人建议全新实现使用<table> HTML标签即可 一.CSS display属性的表格布局相关属性的解释: table    此元素会作为块级表格来显示(类

bootstrap12-条纹表格布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bootstrap11</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

bootstrap14-悬停表格布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bootstrap14</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

bootstrap15-精简表格布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>精简表格布局</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> </