<!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. android studio1.0 for Mac环境搭建与demo运行（手动下载gradle，科学上google） 转载

    http://blog.csdn.net/allenffl/article/details/41957907 官网下载 http://developer.android.com/sdk/install ...

  2. Visual Studio 2012 怪异的自动重启

    学生在做项目的过程中遇到这种问题: -------------- 用 Visual Studio 2012  开发W中eb 项目时,最近总是莫名其妙的自动重启. 后来试了一下,发现是只要在页面中输入 ...

  3. SessionHelper

    MXS&Vincene  ─╄OvЁ  &0000009 ─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄OvЁ:今天很残酷,明天更残酷,后天很美好 ...

  4. Gson将参数放入实体类中进行包装之后再传递

    package com.sinoservices.dms.orderinfo.entity; public class OrderDetailKeyCondition { //工单主键 private ...

  5. python两个 list 交集，并集，差集的方法+两个tuple比较操作+两个set的交集，并集，差集操作+两个dict的比较操作

    转自:http://blog.chinaunix.net/uid-200142-id-3992553.html 有时候,为了需求,需要统计两个 list 之间的交集,并集,差集.查询了一些资料,现在总 ...

  6. 如何杀掉D状态的进程？[zt]【转】

    转自:http://blog.csdn.net/chinalinuxzend/article/details/4288791 [-] 如何杀掉D状态的进程zt 相关博文   原贴:http://www ...

  7. 面向生产环境的大集群模式安装Hadoop

    一.实验说明 1.本实验将使用DNS而不是hosts文件解析主机名: 2.使用NFS共享密钥文件,而不是逐个手工拷贝添加密钥: 3.复制Hadoop时使用批量拷贝脚本而不是逐台复制. 测试环境: Ho ...

  8. PHP中关于 basename、dirname、pathinfo 详解

    basename(url)      返回路径中的文件名部分. dirname(url)       返回路径中的目录名称部分. pathinfo(url)      返回关于文件路径的信息. bas ...

  9. C#:将子Form加入父Form中

    实现的功能:已建立了多个子Form界面,在父Form界面左面,点击不同标题的链接文本,父Form界面右面显示不同的子界面内容. 具体如下: 1.加入split拆分器控件 2.在splitControl ...

  10. popupwindow显示的位置 布局的右上角，标题栏下

    View popview = View.inflate(activity, R.layout.popwindow_layout, null); int width = Dp2pxUtils.Dp2Px ...