div模拟table
2015-07-03 16:00
330 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div模拟table</title>
<style>
*{
padding:0;
margin:0;
}
.div_table{
display:table;
border-collapse:collapse;
}
.div_table .thead,.div_table .tbody{
display: table-header-group;
vertical-align: middle;
}
.div_table .row{
display:table-row;
}
.div_table .row div{
display:table-cell;
border:1px solid #ddd;
padding:8px;
text-align:center;
}
.div_table .row .children_1,.div_table .row .children_2,.div_table .row .children_3{
width:150px;
}
</style>
</head>
<body>
<div class="div_table">
<div class="thead">
<div class="row">
<div class="children_1">1</div>
<div class="children_2">2</div>
<div class="children_3">3</div>
</div>
</div>
<div class="tbody">
<div class="row">
<div class="children_1">1</div>
<div class="children_2">2</div>
<div class="children_3">3</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>div模拟table</title>
<style>
*{
padding:0;
margin:0;
}
.div_table{
display:table;
border-collapse:collapse;
}
.div_table .thead,.div_table .tbody{
display: table-header-group;
vertical-align: middle;
}
.div_table .row{
display:table-row;
}
.div_table .row div{
display:table-cell;
border:1px solid #ddd;
padding:8px;
text-align:center;
}
.div_table .row .children_1,.div_table .row .children_2,.div_table .row .children_3{
width:150px;
}
</style>
</head>
<body>
<div class="div_table">
<div class="thead">
<div class="row">
<div class="children_1">1</div>
<div class="children_2">2</div>
<div class="children_3">3</div>
</div>
</div>
<div class="tbody">
<div class="row">
<div class="children_1">1</div>
<div class="children_2">2</div>
<div class="children_3">3</div>
</div>
</div>
</div>
</body>
</html>
相关文章推荐
- context.Session[“xxx”]详解
- onethink 插件模板定位
- 所闻所获1:动画效果的进度球(水面上升、水面涌动)
- 黑马程序员学习日记 Java基础知识精华
- Android中的加密技术
- JAVA8新特性
- jquery操作select(取值,设置选中)
- SEO的25年“进化史”:从PC到移动站点优化
- 用友华表Cell一些用法小结(cs版本)
- ubuntu14.04/12.04下的caffe 安装——caffe学习历程
- ubuntu14.04/12.04下的caffe 安装——caffe学习历程
- Win8磁盘已用空间和文件大小不符的解决方法
- SharedPreferences保存复杂数据类型
- 浮点数非精确数,作比较运算时需谨慎!
- LinCode落单的数
- JCA和JCE常见问题汇总(持续更新)
- *Triangle
- 设计模式-装饰模式
- 图像语义理解
- 循环队列-链式存储结构-c语言实现