通过div模拟table
参考:
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的更多相关文章
- div模拟table,可实现左右高度同增长(html布局)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div模拟table
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>div模 ...
- jquery双向列表选择器DIV模拟版
前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:htt ...
- 使用模拟Table解决span重叠问题
<div id="test"> <div > <span>adfafadsfadfa</span> <span style=& ...
- ie下div模拟的表格,表头表体无法对齐
现象:ie下,如果某个区域滚动显示表格内容(div模拟的table),表体出现滚动条的时候,会跟表头无法对齐. 解决方法:1.首先需要知道两个高度:表体最大高度height1.目前表体要显示的内容高度 ...
- div 模拟<select>事件
IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟 <!doctype html> <html> ...
- (转)Div和Table的区别
原文:http://www.cnblogs.com/lovebear/archive/2012/04/18/2456081.html Div与table的区别 1:速度和加载方式方面的区别 div 和 ...
- div模拟表格使用display
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 转: Div与table的区别
1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...
随机推荐
- 学习笔记——Windows下cocos2d-x,eclipse中自编译
cocos2d-x创建的安卓项目导入eclipse后. 在项目属性中配置Builders. 在eclipse编译还需要配置相应的变量,即后面提到的cygwin编译中要添加的变量. D:/cygdriv ...
- js基础之数据类型
一:JavaScript 数据类型:字符串.数字.布尔.数组.对象.Null.Undefined JavaScript 字符串; var carname="Bill Gates ...
- 解决:无法将“Add-Migration”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次
1.输入的中划线“-”格式不对,检查是否为全角状态下输入,误输入了下划线“_",或是前后有空格: 2.没有引用EntityFramework命令,请执行如下名称(Import-Module ...
- tomcat服务器设置用户名和密码
conf/tomcat-user.xml <user username="admin" password="1234" roles="manag ...
- Brain Network (easy)
Brain Network (easy) One particularly well-known fact about zombies is that they move and think terr ...
- android脚步---设置layout隐藏属性
设置layout的属性,应用到android view的setVisibility 有三个值 visibility VISIBLE, INVISIBLE, GONE. 可见的 不可见的 ...
- angularJs中ngModel的坑
angular中指令被用的最多的除了ng-repeat之外就非他莫属了吧,由于各种业务的需求,我们经常需要去写一些继承ngModel的指令,来满足各种奇葩需求,最多的莫过于表单的验证啦,另外你在封装一 ...
- Android Handler 异步消息处理机制的妙用 创建强大的图片加载类(转)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38476887 ,本文出自[张鸿洋的博客] 最近创建了一个群,方便大家交流,群号: ...
- (转)MATLAB入门教程
MATLAB入门教程 1.MATLAB的基本知识 1-1.基本运算与函数 在MATLAB下进行基本数学运算,只需将运算式直接打入提示号(>>)之後,并按入Enter键即可.例如: ...
- 虚拟机安装tools for Ubuntu
1.启动虚拟机,进入虚拟机 2.选定菜单中的虚拟机按钮,点击安装VMware Tools 3.此时虚拟机上会弹出一些文件, 复制VMwareTools-XXX-XX.tar.gz到桌面,鼠标右键可 ...