display:table 表格布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display:table 表格布局相关的知识,希望对你有一定的参考价值。

table 布局最大的特点

1、同行等高
2、宽度自动调节
 
那么table-cell是不是具备这个特点呢?答案是yes,为什么呢?css中有一个有意思的规则“创建匿名表格元素”。
 
拿table-cell来扯,就是,当某个元素被设置为display:table-cell的时候,如果她的父节点不是display:table-row,爷爷节点不是display:table,这个儿子生出了他的爸爸和爷爷(浏览器会自动创建者两个匿名盒对象)
 
用途
1、等高布局
2、和vertical-align:middle搞在一起可以做大小不固定元素的垂直居中布局(还有多行文本垂直居中)
3、利用列宽度自动调节这个特点可以作左固定右自适应布局
<style type="text/css">
    .left{float:left; width:260px; padding:10px; margin-right:10px; border:1px solid #ccc;}
    .classtd{ display: table-cell; width:3000px; padding:10px; border:1px solid #ccc;}
</style>
<div class="left">我是左边栏目</div>
<div class="classtd">
    我是自适应的右边
</div>
display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将基于单元格内容自动调整。所以设置width:3000px的用途是尽可能的宽的意思。这样就可以达到自适应的效果。
 
 
display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。
单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,
与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不要同用。设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。
 
.fix{*zoom:1;}
.fix:after{display:block; content:"clear"; height:0; clear:both; visibility:hidden;}
.l{float:left;}
.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}
 
<div class="fix">
      <div class="l"></div>
      <div class="cell"></div>
 </div>
 
对于连续单词字符换行问题尝试添加以下代码
display:table;  width:100%;  table-layout:fixed;  word-wrap:break-word;
 
 
http://www.zhangxinxu.com/wordpress/2010/10/%e6%88%91%e6%89%80%e7%9f%a5%e9%81%93%e7%9a%84%e5%87%a0%e7%a7%8ddisplaytable-cell%e7%9a%84%e5%ba%94%e7%94%a8/

以上是关于display:table 表格布局的主要内容,如果未能解决你的问题,请参考以下文章

基于CSS属性display:table的表格布局的使用

布局方式-表格布局

基于display:table的CSS布局

利用display属性写出表格的布局样式

有关table布局时tr 属性display:block显示布局错乱

display:table的几个用法