参考:

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. 如何删除tomcat下的一目

    不知道我有没有把问题想简单了,是不是应该把webapps下对应的文件夹删了就可以了. work下面对应的也删掉 这个取决于你在tomcat下发布那个项目的方式. 首先是工程的根目录要删除,然后是工程相 ...

  2. FlashDevelop调试Air出错

    按下F5调试命令行窗口出现错误: Starting AIR Debug Launcher... invalid application descriptor: Unknown namespace: h ...

  3. PAT (Advanced Level) 1107. Social Clusters (30)

    简单并查集. #include<cstdio> #include<cstring> #include<cmath> #include<vector> # ...

  4. The Importance of Money in Life

    What were you taught about money as you were growing up?something like "Money doesn't grow on t ...

  5. 优化のzencart URL &zenid=.....

    zencart URL后面带有一串&zenid=.....解决方案 发布时间:2013年3月16日 次浏览:106 经木木测试,此方法可用. ================= 最近一个客户的 ...

  6. Redis学习笔记(二)-key相关命令【转载】

    转自 Redis学习笔记(二)-key相关命令 - 点解 - 博客园http://www.cnblogs.com/leny/p/5638764.html Redis支持的各种数据类型包括string, ...

  7. nfs安装配置

    一.NFS服务简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操 ...

  8. URL 传+号到后台变空格问题解决方案

    今天巧合遇到这个问题,下面是网上找的解决方案. 原文:http://blog.sina.com.cn/s/blog_a0949eec01010xta.html 今天在调试客户端向服务器传递参数时,参数 ...

  9. Posix消息队列实现机制

    本文是对<Unix 网络编程 卷2:进程通信>的笔记. 引言 消息队列是进程间通信的一种方式,可是如果不理解他的实现原理,会有众多不理解之处,下面就结合本书中的例子,对posix消息队列来 ...

  10. linux下的安装百度云网盘

    linux下的百度网盘 (2014-10-20 18:01:14) 标签: linux 百度网盘 网盘 百度 forlinux 分类: 技术博文 百度网盘说实话,其实我挺喜欢的,好处什么的,就不说了, ...