<!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>

div模拟table的更多相关文章

  1. div模拟table，可实现左右高度同增长（html布局）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 通过div模拟table

    参考: https://css-tricks.com/complete-guide-table-element/ 不要使用内联样式,但只是为了了解这里是如何去: <section style=& ...

  3. jquery双向列表选择器DIV模拟版

    前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:htt ...

  4. 使用模拟Table解决span重叠问题

    <div id="test"> <div > <span>adfafadsfadfa</span> <span style=& ...

  5. ie下div模拟的表格，表头表体无法对齐

    现象:ie下,如果某个区域滚动显示表格内容(div模拟的table),表体出现滚动条的时候,会跟表头无法对齐. 解决方法:1.首先需要知道两个高度:表体最大高度height1.目前表体要显示的内容高度 ...

  6. div 模拟<select>事件

    IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...

  7. (转)Div和Table的区别

    原文:http://www.cnblogs.com/lovebear/archive/2012/04/18/2456081.html Div与table的区别 1:速度和加载方式方面的区别 div 和 ...

  8. div模拟表格使用display

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 转: Div与table的区别

    1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...

随机推荐

  1. 关于网页显示乱码问题的一些个人见解（PHP、JSP...）

    最近做项目,遇到了一些网页显示乱码的情况,在网上查了很多资料都没有给一个全面的准确的答案,自己摸索了一下经过对比开发环境(我使用的是Myeclipse)编辑器的编码和浏览器默认显示的编码发现,在字符编 ...

  2. ThinkPHP 3 MVC模式和URL访问

    一.什么是MVC                 //了解    M -Model 编写model类 对数据进行操作    V -View  编写html文件,页面呈现    C -Controlle ...

  3. 交叉验证（cross validation）

    转自:http://www.vanjor.org/blog/2010/10/cross-validation/ 交叉验证(Cross-Validation): 有时亦称循环估计, 是一种统计学上将数据 ...

  4. spring mvc ajax请求

    jar包中增加 jackson-annotations-2.5.0.jar jackson-core-2.5.0.jar jackson-databind-2.5.0.jar springmvx.xm ...

  5. python中关于字符串的操作

    Python 字符串操作方法大全 python字符串操作实方法大合集,包括了几乎所有常用的python字符串操作,如字符串的替换.删除.截取.复制.连接.比较.查找.分割等,需要的朋友可以参考下 1. ...

  6. ubuntu无法进入桌面的修复

    今天的kubuntu更新后停在了启动logo上,无法进入系统界面了. 先在网上找了找,搜到了一个看起来很像的. 1)ubuntu在系统启动logo过后无法进入桌面的处理方法 一般情况下,无法显示桌面, ...

  7. HDU2602(背包)

    Bone Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  8. Vmware 的三种网络连接方式

    VMWare提供了三种工作模式,host-only(主机模式).NAT(网络地址转换模式).bridged(桥接模式). 1.host-only(主机模式) 在某些特殊的网络调试环境中,如何要求将真实 ...

  9. C# 6 与 .NET Core 1.0 高级编程 - 37 章 ADO.NET

    译文,个人原创,转载请注明出处,有不对的地方欢迎指出与交流. 英文原文:Professional C# 6 and .NET Core 1.0 - 37 ADO.NET --------------- ...

  10. sed 命令详解

    sed 用于筛选和转换文本的流编辑器 描述: sed是一个流编辑器,流编辑器对一个输入流执行基本的文本转换(输入流来自文件或者管道行).虽然在某些方面类似于很多可运行脚本的编辑器,但是sed的工作方式 ...