参考:

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. php basename()文件夹 路径 文件后缀名 读取pathinfo()

    $path = "/www/mywebsite/images/myphoto.jpg"; 1.pathinfo()函数 pathinfo()函数返回的是一个包含了文件信息的数组,数 ...

  2. ZABBIX自定义用户KEY与参数USERPARAMETERS监控脚本输出

    zabbix在模板中预定义了一些key,但通常情况,并不能满足我们的需求.幸运的是zabbix提供了自定义key的方法,因此我们可以灵活的监控各种我们想要监控的数据. 定义配置文件 通过yum安装的z ...

  3. Struts2 语法--action

    xml的注释: <!--叨叨叨叨--> web.xml注释格式": <?xml version="1.0" encoding="UTF-8&q ...

  4. zf-关于差旅报销的excel表单填写

    日期一定要填,还有二级科目事由跟申请金额,如果申请金额为0的话,那么久直接删除哪一行,因为如果不删除的话,Excel表单将提交出错.

  5. java日期格式大全 format SimpleDateFormat(转)

    java日期格式大全 format SimpleDateFormat   /**    * 字符串转换为java.util.Date<br>    * 支持格式为 yyyy.MM.dd G ...

  6. UCI

    数据库是加州大学欧文分校(UniversityofCaliforniaIrvine)提出的用于机器学习的数据库,这个数据库目前共有187个数据集,其数目还在不断增加,UCI数据集是一个常用的标准测试数 ...

  7. VS2012添加对DirectX SDK中需要文件的引用

    error LNK2019: 无法解析的外部符号 _DirectDrawCreateEx@16,该符号在函数 "int __cdecl DD_Init(int,int,int)" ...

  8. Jackson基础笔记

    具体内容待完善......手抖,发错了! 一.基本使用 1. bean->jsonStr 2. jsonStr->bean 二.注解使用 三.复杂对象转换 四.其他细节 读取json文本.

  9. 小米1S iptables禁止443端口

    shell@android:/system/bin # ./iptables -A INPUT -p tcp --dport 443 -j DROP./iptables -A INPUT -p tcp ...

  10. Javascript 浏览器探测

    1.根据浏览器的性能 var is = { ff: window.globalStorage, ie: document.all && !window.opera, ie6: !win ...