<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>table</title>

<style type="text/css">

* {

    margin:0;

    padding:0;

}

.table {

    width:400px;

    margin:50px auto 0;

    border-collapse:collapse;

    display:table;

}

.td {

    display:table-cell;

    line-height:20px;

    vertical-align:top;

    border:1px solid #ccc;

    position:relative;

    vertical-align:middle;

    text-align:center;

}

.tip {

    width:50px;

    height:50px;

    position:absolute;

    left:100px;

    top:50px;

    background:red

}

.tr {

    display:table-row;

}

</style>

</head>

<body>

<div class="table">

  <div class="tr">

    <div class="td">

      <p>a</p>

      <p>d</p>

      <p>d</p>

      <div class="tip"></div>

    </div>

    <div class="td">a</div>

    <div class="td">a</div>

  </div>

  <div class="tr">

    <div class="td">

      <p>a</p>

      <p>a</p>

      <p>a</p>

    </div>

    <div class="td">a</div>

    <div class="td">a</div>

  </div>

  <div class="tr">

    <div class="td">

      <p>a</p>

      <p>g</p>

      <p>j</p>

    </div>

    <div class="td">a</div>

    <div class="td">a</div>

  </div>

</div>

</body>

</html>

实际展示效果，火狐，谷歌以及ie8以上浏览器上，ie67我不考虑了

div模拟表格使用display的更多相关文章

  1. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  2. 问题：table 可否实现对角线；结果：用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

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

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

  4. div 模拟<select>事件

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

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

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

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

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

  7. 模拟表格 inline-block等高布局

    表格是个好东西,它可以自动根据内容来调整格子,确保数据正常显示,并且不破坏表格的结构.但也有一些劣势,因为是用大量标签堆砌而成,页面结构会比较乱,细节也往往不容易控制.所以我们希望有表格的展示效果,但 ...

  8. jquery用div模拟一个下拉列表框

    原文 jquery用div模拟一个下拉列表框 今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我 ...

  9. div模拟table

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>div模 ...

随机推荐

  1. SIFT算法详解（转）

    http://blog.csdn.net/zddblog/article/details/7521424 目录(?)[-] 尺度不变特征变换匹配算法详解 Scale Invariant Feature ...

  2. php防止表单重复提交

    解决方案一:引入cookie机制来解决 提交页面代码如下a.php代码如下: <form id="form1" name="form1" method=& ...

  3. PHP人民币金额数字转中文大写的函数

    <?php header("Content-Type:text/html;charset=utf-8"); error_reporting(2); function cny( ...

  4. android 学习随笔七(网络：图片及文本传输及线程关系 )

    主线程.子线程.UI的关系 简单的HTTP请求 -------------------------------------------------------- public class MainAc ...

  5. msyql数据库位置

    MySQL默认的数据文件存储目录为/var/lib/mysql.假如要把目录移到/home/data下需要进行下面几步: 1.home目录下建立data目录 cd /home mkdir data 2 ...

  6. LoadRunner并发用户和集合点的深入讨论

    看到51上三个高手Zee, 大漠飞鹰,xingcyx的一场非常精彩的关于并发用户数和集合点的讨论,很有意义.如果对这两个概念不清楚的朋友,一定要仔细领悟了. 故事开始于xingcyx的一番话: 声明: ...

  7. 模数转换器(ADC)的基本原理【转】

    模数转换器(ADC)的基本原理 模拟信号转换为数字信号,一般分为四个步骤进行,即取样.保持.量化和编码.前两个步骤在取样-保持电路中完成,后两步骤则在ADC中完成. 常用的ADC有积分型.逐次逼近型. ...

  8. Linux系统调用--mmap/munmap函数详解【转】

    转自:http://www.cnblogs.com/leaven/archive/2011/01/14/1935199.html http://linux.chinaunix.net/techdoc/ ...

  9. linux ar命令

    当我们的程序中有经常使用的模块,而且这种模块在其他程序中也会用到,这时按照软件重用的思想,我们应该将它们生成库,使得以后编程可以减少开发代码量.这里介绍命令ar,用来对库操作. 1.ar基本用法 ar ...

  10. Spring+Quartz实现定时执行任务的配置

    1.要想使用Quartz 必须要引入相关的包:以下是我在项目中gradle中的配置: compile 'org.quartz-scheduler:quartz:2.1.1' 2.Scheduler的配 ...