参考:

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. UIRoot

    scalingStyle: Flexible:固定大小,不管设备屏幕的大小是多少,都以固定的像素显示UI Constrained: 可适应屏幕 如要使640*480像素的背景图适应屏幕,要如下设置 c ...

  2. 河南多校大一训练赛 D

    题目链接:http://acm.hust.edu.cn/vjudge/contest/125004#problem/D 密码:acm Description If an integer is not ...

  3. CodeForces 678D Iterated Linear Function

    简单矩阵快速幂. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm& ...

  4. Android中在布局中写ViewPager无法渲染出来的问题

    今天刚刚使用Android Studio,在写ViewPager时,首先按F4把Dependencies添加一个V4包,然后写ViewPager,如下: <android.support.v4. ...

  5. hdu_5726_GCD(线段树维护区间+预处理)

    题目链接:hdu_5726_GCD 题意: 给你n个数(n<=1e5)然后m个询问(m<=1e5),每个询问一个区间,问你这个区间的GCD是多少,并且输出从1到n有多少个区间的GCD和这个 ...

  6. Android sdk content loader 0%的解决方案

    Eclipse在启动时,经常会碰到半天启动不起来的情况,罪魁祸首就是“Android sdk content loader 0%”,题主经常是受这玩意的百般折磨,大早上一来就被这扫了工作的激情,浪费了 ...

  7. 转 sqlplus执行sql报错:ORA-01756:

    1.sqlplus执行sql报错:ORA-01756: quoted string not properly terminated   分类: 技术         在SQLPLUS中执行SQL文件时 ...

  8. 设置HTML表格细边框

    简介:WEB前端|这是关于怎么设置HTML表格细边框的问题,把表格边框设置为细小的线条边框一般我们用表格的时候总会给它个border属性,比如:<tableborder="1" ...

  9. ReactiveCocoa Weak-Strong Dance

    AC在应用中大量使用了block,由于Objective-C语言的内存管理是基于引用计数的,为了避免循环引用问题,在block中如果要引用self,需要使用@weakify(self)和@strong ...

  10. 在 WinCe 平台读写 ini 文件

    在上篇文章开发 windows mobile 上的今日插件时,我发现 wince 平台上不支持例如 GetPrivateProfileString 等相关 API 函数.在网络上我并没有找到令我满意的 ...