当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器。
网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。
display:table=>相当于“table”标签;
display:table-row=>相当于“tr”标签;
display:table-cell=>相当于“td”标签;
display:table布局可以实现一些其他布局比较难实现的场景,如下:
要实现这种多行文字居中显示在一个固定大小的容器里面,如果是其他的css布局实现,我们常用的做法还需要用到定位,还要用到transfrom才能完成;但是用display:table布局可以很简单的实现;
<div>
<span>我是简单的两行文字</span>
</div>
div{
display:table;
}
span{
diaplay:table-cell;
vertical-align: middle;//对其方式为middle
}
display:table
1、table布局除了上面3种常用的值还有以下的
2、table至少有一个display:table和display:table-cell这个其实是跟html的table一致的,那么使用了table布局之后就可以对应的使用一些table常用的css样式:如border-collapse,text-align 和 vertical-align,border-spacing,caption-side,empty-cells等等;详细的可以参考http://www.w3school.com.cn/css/css_table.asp;
3、table-cell同样会被其他一些CSS属性破坏,例如float, position:absolute,所以,在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。
4、设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性,基本上就是活脱脱的一个td标签元素了。