<!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. 【py网页】urllib模块，urlopen

    Python urllib 库提供了一个从指定的 URL 地址获取网页数据,然后对其进行分析处理,获取想要的数据. 下面是在 Python Shell 里的 urllib 的使用情况: 01 Pyth ...

  2. update表关联

    第一种: update student set student.age =(select `user`.age from user where id=student.id ) where studen ...

  3. Origin双坐标轴图表

    1.空白处右键Add New Colume添加新列 2.全选各个列绘制图表 3.添加新的Y轴图层Graph—New Layer—Right-Y 4.右键左上角图层2 –Layer Contents 绑 ...

  4. ectouch第五讲 之表

    Ectouch本身相关的表 17个ecs_touch_activity[touch优惠活动扩展表] 优惠活动的自增id 取值ecs_favourable_activity表cat_id,给优惠活动加b ...

  5. node-webkit教程<>Native UI API 之Menu(菜单)

    node-webkit教程(6)Native UI API 之Menu(菜单)1 前言... 2 6.1  Menu 概述... 3 6.2  menu api6 6.2.1  new Menu([o ...

  6. C#Winform常引用的库

    1.DevExpress:引用其下的不同DLL,可操作使用不同的控件 2.IrisSkin2:引用对应的DLL后,代码如下 private Sunisoft.IrisSkin.SkinEngine s ...

  7. C# 插件

    1.EsFrameWork框架 http://www.oraycn.com/ESFramework_download.aspx

  8. linux命令介绍：df使用介绍

    linux中df命令参数功能:检查文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 语法:df [选项] 说明:linux中df命令可显示所有文件系统对 ...

  9. mime类型表

    types {    text/html                             html htm shtml;    text/css                         ...

  10. ecshop发票不能使用出现flow.php on line 723等报错

    最模板给客户ecshop网站做编码转换出现个问题,网站在点结算页面出现Warning: Invalid argument supplied for foreach flow.php on line 7 ...