通过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> ...
随机推荐
- jquery_api(事件一)
一 .unload在火狐,谷歌无法弹出alerta是因为这两个浏览器默认组织alert弹出,unload事件可以进行一些对象销毁,事件解除绑定等清理工作. 如果你想在用户离开页面之前确认是否离开,最好 ...
- Issue 5158: Modal dialog present (UnexpectedAlertOpen) issue in IE (Similar issue like 3360)
https://code.google.com/p/selenium/issues/detail?id=5158 Reported by mailtopa...@gmail.com, Feb 13 ...
- android 代码优化:封锁输出日志
可以使用 ProGuard 完全地删除任何在发布版中无用的语句,关于 ProGuard 参见: http://developer.android.com/guide/developing/tools/ ...
- MySQL+heartbeat+nfs做高可用
一.环境准备节点两个node1:10.10.10.202node2:10.10.10.203nfs服务器:node3:10.10.10.204系统环境CentOS release 6.5 (Final ...
- APK反编译(Linux环境下)
先下载dex2jar和jd-gui这两个软件,然后解压APK,把解压出来的classes.dex,放到dex2jar的根目录,然后命令行进入到dex2jar根目录,然后执行命令 ./dex2jar ...
- Python3基础 list() 将一个字符串转换成列表
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- 读写锁的实现原理(pthread_rwlock_t)
引言 不同的锁之间的语义是不一样的,没有一劳永逸的锁,只有更适合的锁. 如果是同一进程里的不同线程共享读写锁,那么读写锁变量的维护是在进程内部即可.如果是不同进程共享读写锁,那么读写锁变量的维护是在共 ...
- 项目整体说明及WBS练习
乐谱识别研究的意义 纸质乐谱向数字化乐谱的转换,是人类音乐活动与计算机音乐处理之间进行信息交流的必经之路.光学乐谱识别是将纸质乐谱扫描输入计算机后,对乐谱图像加以处理.识别.分析,最终获得乐谱的计算机 ...
- 超级好用的excel第三方组件
http://www.cnblogs.com/MR_ke/archive/2010/02/25/1673243.html 前一篇介绍了怎么用com操作excel,后来有朋友说用NPOI好,下面我也来介 ...
- 高橋君とカード / Tak and Cards
高橋君とカード / Tak and Cards Time limit : 2sec / Stack limit : 256MB / Memory limit : 256MB Score : 300 p ...