<!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. zw版【转发·台湾nvp系列Delphi例程】HALCON OverpaintRegion1

    zw版[转发·台湾nvp系列Delphi例程]HALCON OverpaintRegion1 unit Unit1;interfaceuses Windows, Messages, SysUtils, ...

  2. sql语句中where和having的区别

    WHERE语句在GROUPBY语句之前:SQL会在分组之前计算WHERE语句. HAVING语句在GROUPBY语句之后:SQL会在分组之后计算HAVING语句.

  3. 操作系统，windows编程，网络，socket

    首发:个人博客,更新&纠错&回复 之前关于c/s的一篇博文只记了思路没记代码,而且表达不清晰,事后看不知所云,这个习惯要改. 这十几天学了点关于操作系统.windows编程和网络,主要 ...

  4. java的web项目中使用cookie保存用户登陆信息

    本文转自:http://lever0066.iteye.com/blog/1735963 最近在编写论坛系统的实现,其中就涉及到用户登陆后保持会话直到浏览器关闭,同时可以使用cookie保存登陆信息以 ...

  5. django ORM model filter 条件过滤，及多表连接查询、反向查询，某字段的distinct

    版权归作者所有,任何形式转载请联系作者.作者:petanne(来自豆瓣)来源:https://www.douban.com/note/301166150/ 1.多表连接查询:感觉django太NX了. ...

  6. oracle ORA-12519,TNS:no appropriate service handler found的

    select count(*) from v$process --当前的连接数 select value from v$parameter where name = 'processes' --数据库 ...

  7. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  8. Discuz! X2头部header.htm修改指南

    相对于1.5版本,2.0版本并没有在模板机制上做太大改动,基本延续了1.5的模板机制.下面我就为和大家一起过一下X2的头部代码.希望大家对头部代码有些认识. 1.顶部的设为首页,和收藏本站.这里是可以 ...

  9. hashMap底层put和get方法逻辑

    1.hashmap put方法的实现: public V put(K key, V value) { if (key == null) return putForNullKey(value); int ...

  10. freeMarker中list的两列展示

    前台界面中我使用freeMarker的机会有很多,自然也就会接触下<List>标签,我想大家应该都不陌生.<#list attrList as attr>${a.name}&l ...