display:table的用法
目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢?
1、用DIV+CSS编写出来的文件k数比用table写出来的要小,不信你在页面中放1000个table和1000个div比比看哪个文件大
2、table必须在页面完全加载后才显示,没有加载完毕前,table为一片空白,也就是说,需要页面完毕才显示,而div是逐行显示,不需要页面完全加载完毕,就可以一边加载一边显示
3、非表格内容用table来装,不符合标签语义化要求,不利于SEO
4、table的嵌套性太多,用DIV代码会比较简洁
但是有的项目中又需要类似表格的布局怎么办呢?可以用display:table来解决
display:table系列几乎是和table系的元素相对应的,请看下表:
table | (类似 <table>)此元素会作为块级表格来显示,表格前后带有换行符。 |
inline-table | (类似 <table>)此元素会作为内联表格来显示,表格前后没有换行符。 |
table-row-group | (类似 <tbody>)此元素会作为一个或多个行的分组来显示。 |
table-header-group | (类似 <thead>)此元素会作为一个或多个行的分组来显示。 |
table-footer-group | (类似 <tfoot>)此元素会作为一个或多个行的分组来显示。 |
table-row | (类似 <tr>)此元素会作为一个表格行显示。 |
table-column-group | (类似 <colgroup>)此元素会作为一个或多个列的分组来显示。 |
table-column | (类似 <col>)此元素会作为一个单元格列显示。 |
table-cell | (类似 <td> 和 <th>)此元素会作为一个表格单元格显示。 |
table-caption | (类似 <caption>)此元素会作为一个表格标题显示。 |
目前display:table的应用场景也是比较广泛的,Google地图在搜索路线时,左侧的路线详情就是用的display:table来实现的。
1.div模拟表格:
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>模拟表格</title> </head> <body><style type="text/css" rel="stylesheet">.table {display: table;border: 1px solid #cccccc;margin: 5px;/*display: table时padding会失效*/}.row {display: table-row;border: 1px solid #cccccc;/*display: table-row时margin、padding同时失效*/}.cell {display: table-cell;border: 1px solid #cccccc;padding: 5px;/*display: table-cell时margin会失效*/} </style> <div class="table"><div class="row"><div class="cell">张三</div><div class="cell">李四</div><div class="cell">王五</div></div><div class="row"><div class="cell">张三</div><div class="cell">李四</div><div class="cell">王五</div></div> </div> </body> </html>
2.让块级标签实现行内效果,即浮动至同一横轴,并实现等高效果
table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以,很多时候,我们需要等高布局的时候,就可以借助display:table-cell
属性。说到table-cell
的布局,不得不说一下“匿名表格元素创建规则”:
CSS2.1表格模型中的元素,可能不会全部包含在除HTML之外的文档语言中。这时,那些“丢失”的元素会被模拟出来,从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象,使其符合table/inline-table、table-row、table- cell的三层嵌套关系。
举个例子吧,如果我们为元素使用“display:table-cell;”属性,而不将其父容器设置为“display:table-row;”属性,浏览器会默认创建出一个表格行,就好像文档中真的存在一个被声明的表格行一样。
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>display:table实现浮动效果</title> </head> <body><style type="text/css" rel="stylesheet">.table {display: table;margin: 5px;width: 1000px;}.row {display: table-row;}.cell {display: table-cell;padding: 10px;background-color: red;} </style> <div class="table"><div class="row"><div class="cell">内容内容内容内容内容内内容内</div><div class="cell">内容内容内容内容内容内容内容内容内容</div><div class="cell">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></div> </div> </body> </html>
上例中div.row可以不要,效果一样
3.结合vetical-align实现块级元素垂直居中
转载于:https://www.cnblogs.com/cowboybusy/p/10530547.html
display:table的用法相关推荐
- CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...
- CSS2中display:table属性的用法详解
想必大家都已经知道了css属性display的一些常见属性值,比如none,block,inline-block等等,今日我在看一个效果代码的时候,碰到一个之前从未使用过的属性值,就是它了,displ ...
- PL/SQL表---table()函数用法
http://www.itpub.net/thread-617298-1-1.html PL/SQL表---table()函数用法: 利用table()函数,我们可以将PL/SQL返回的结果集代替ta ...
- oracle table()函数用法
PL/SQL表---table()函数用法 /* PL/SQL表---table()函数用法: 利用table()函数,我们可以将PL/SQL返回的结果集代替table. oracle内存表在查询和报 ...
- table()函数用法
PL/SQL表---table()函数用法 /* PL/SQL表---table()函数用法: 利用table()函数,我们可以将PL/SQL返回的结果集代替table. oracle内存表在查询和报 ...
- css Table布局:基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
- display:table和display:table-cell的妙用
display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...
- 基于display:table的CSS布局
CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,"display:table;"的CSS声明能够让一个HTML元素和它的子节点像table元 ...
- display:table与本身的table的区别
一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...
最新文章
- java反射 获取参数名_java
- C++从键盘输入二维数组
- 修改数据库文件为自动扩展以达到表空间自动扩展的目的
- 设计模式在项目中的应用案例_设计模式在项目中的应用(初学者版)
- 【BJOI2017】树的难题【点分治】【线段树】
- 如何优化网页转化率?(上篇)
- MySQL只有80端口开放_Centos 开放80端口
- 开发linux版QQ就是支持未来的国产操作系统
- python条形码,Python中的远距离条形码
- 计算机英语文体特点,公共英语五级写作文体特点分析
- html关闭广告代码,JS实现可点击展开与关闭的左侧广告代码
- oracle ebs fsg报表,Oracle EBS FSG报表迁移
- 基于小程序开发的宝可梦图鉴小程序源码课程设计毕业设计
- xss payload大全
- 小学生数学测试软件编写分析,小学数学测试的质量分析
- 2022年必须知道的数字化转型!
- linux usb3.0移动硬盘,希捷(Seagate)1TB USB3.0移动硬盘使用评测
- 【CSS】770- 多层嵌套的CSS 3D动画技术详解
- 容器化技术与微服务结合---docker(一)
- 区块链公证和知识产权(IP)保护应用场景
热门文章
- scheme解释器 C语言实现,使用Scala写了个简单的Scheme解释器
- 我对CSS vertical-align的一些理解与认识(二)
- A Quantization-Friendly Separable Convolution for MobileNets
- angular2 路由ajax,如何通过Javascript函数在Angular 2中实现AJAX
- 和包支付的钱哪里来_2019年支付宝年度账单出炉,来看看你究竟花了多少钱
- php cve-2014-9427漏洞,WEB应用漏洞-温州特种设备检测研究院.DOC
- Ajax技术简单入门
- planning algorithms chapter 2
- html页面高度设为自动,html – CSS:响应式布局中的高度自动问题
- 安卓JAVA调用lua_android中java与lua的相互调用