display：table 表格布局

Posted 2020-06-09

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的用途是尽可能的宽的意思。这样就可以达到自适应的效果。

http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html

 

 

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/