<!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. [CrunchBang]禁止“桌面上鼠标滚轮切换工作区桌面“

    鼠标滚轮切换虚拟桌面相关问题, 编辑 ~/.config/openbox/rc.xml 在   <context name="Desktop">段: <mouse ...

  2. 【crunch bang】 增加“菜单项”

    [右键菜单]->[Settings]->[Openbox]->[GUI Menu Editor] 挑选合适的位置,增加[菜单项],编辑内容.

  3. 随讲MyIsam和InnoDB的区别

    mysiam表不支持事务处理,同时mysiam表不支持外键.外键不用说了吧?不知道的话,找度娘. 同时,在执行数据库写入的操作(insert,update,delete)的时候,mysiam表会锁表, ...

  4. notification 通知

    1. 定义一个方法 -(void) update{ } 2. 对象注册,并关连消息 [[NSNotificationCenter defaultCenter]addObserver:self sele ...

  5. android 项目学习随笔十四（WebView）

    1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...

  6. JSP直接连接sql2008数据库并显示

    <%@ page contentType="text/html; charset=utf-8" language="java" errorPage=&qu ...

  7. 装多系统删除某个系统后，如何恢复ubuntu引导

    在重装系统或者再装多个系统后可能会出现ubuntu的引导文件不存在的情况,windows系列的引导文件可以用winpe修复,但是ubuntu就不可以,虽然网上很多种修复ubuntu的引导文件 方式,但 ...

  8. [转]JEXUS的高级配置

    转自:http://www.cnblogs.com/xiaodiejinghong/archive/2013/04/14/3019660.html 前一回合,我们对服务器软件Jexus作了简单的介绍, ...

  9. android 使用WebView 支持播放优酷视频，土豆视频

    看了很多文章和所谓的解决android WebView播放优酷,土豆等视频的办法,都是什么 setPluginsEnabled,在android 4.x之后都不好使,压根就没这函数,因为android ...

  10. Window下memcached安装与测试步骤

    如何在Window下memcached安装与测试步骤 工具/原料 电脑 memcached 软件 方法/步骤 软件包下载 下载Memercached For Windows:http://downlo ...