参考:

https://css-tricks.com/complete-guide-table-element/

不要使用内联样式,但只是为了了解这里是如何去:

<section style="display: table;">
<header style="display: table-row;">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</header>
<div style="display: table-row;">
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
<div style="display: table-cell;"></div>
</div>
</section>
 

这里的一个简单的技巧是,如果你不需要的话,你甚至不需要表行元素.。一组显示:表单元格;元素是显示的子元素:表;元素将表现为它们都在同一行中。

您总是更改元素的显示属性,以获取表样式行为.

display: table                /* <table>     */
display: table-cell /* <td> */
display: table-row /* <tr> */
display: table-column /* <col> */
display: table-column-group /* <colgroup> */
display: table-footer-group /* <tfoot> */
display: table-header-group /* <thead> */

通过div模拟table的更多相关文章

  1. div模拟table,可实现左右高度同增长(html布局)

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

  2. div模拟table

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

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

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

  4. 使用模拟Table解决span重叠问题

    <div id="test"> <div > <span>adfafadsfadfa</span> <span style=& ...

  5. ie下div模拟的表格,表头表体无法对齐

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

  6. div 模拟<select>事件

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

  7. (转)Div和Table的区别

    原文:http://www.cnblogs.com/lovebear/archive/2012/04/18/2456081.html Div与table的区别 1:速度和加载方式方面的区别 div 和 ...

  8. div模拟表格使用display

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 转: Div与table的区别

    1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...

随机推荐

  1. POJ 3292 Semi-prime H-numbers (素数筛法变形)

    题意:题目比较容易混淆,要搞清楚一点,这里面所有的定义都是在4×k+1(k>=0)这个封闭的集合而言的,不要跟我们常用的自然数集混淆. 题目要求我们计算 H-semi-primes, H-sem ...

  2. POJ 2773 Happy 2006(欧几里德算法)

    题意:给出一个数m,让我们找到第k个与m互质的数. 方法:这题有两种方法,一种是欧拉函数+容斥原理,但代码量较大,另一种办法是欧几里德算法,比较容易理解,但是效率很低. 我这里使用欧几里德算法,欧几里 ...

  3. JavaScript数组函数unshift、shift、pop、push使用实例

    如何声明数组 s中数组的声明可以有几种方式声明 复制代码代码如下: var tmp = [];  // 简写模式var tmp = new Array(); // 直接new一个var tmp = A ...

  4. jsp如果超过字数就变成...

    <script> var infoTitle = '<ww:property value="infoTitle"/>'; if(infoTitle.leng ...

  5. javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  6. 【第k小素数 】 打表问题

    Prime Number TimeLimit: 1 Second MemoryLimit: 32 Megabyte Totalsubmit: 399 Accepted: 88 Description ...

  7. Gerald and Giant Chess

    Gerald and Giant Chess time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  8. nullable,kindof,泛型新特性

    文章来自: http://blog.csdn.net/majiakun1/article/details/46530245 Overview 自 WWDC 2015 推出和开源 Swift 2.0 后 ...

  9. 前端复制功能的若干 -- document.execCommand()

    最近涨停科技公司实习,由于backend基础太弱...强行前端了一把..搞了两周才搞下页面里copy的功能,期间有些琐碎,恐忘,记录在此. 目前copy主流有四种方式:ZeroClipboard,Cl ...

  10. Allegro PCB -如何做自定义焊盘

    1.如何创建自定义焊盘,比如这种形状的焊盘. (1).打开PCB Editor –>Allegro PCB Design ->New,在类型中选择Shape symbol,并输入名字,比如 ...