关于table布局

[cqupt-yifanwu]

关于table布局

虽然table布局因为它的一些非语义化、布局代码冗余，以及不好维护改版等缺点被赶出了布局界。但是在css不给力时期，table布局也曾风靡一时，就算现在看来table的一些布局的特性也是非常给力的，而幸好css也吸取了table布局一些好的特性为己用。让我们可以使用更少、更语义化的标签来模拟table布局，可以跳过table布局的缺点又实现我们想要的效果，所以我们首先需要了解table的一些特性以及对应的css属性。
我们在不居中使用到的也就是table、tr、td的一些特性，所以我们只需要了解这三个标签的特性就足够了。

一些table的表现

display：table

• 可设置宽高、margin、border、padding等属性
• table的宽度默认由内容的宽度撑开，如果table设置了宽度，宽度默认被里面的td平分，如果设置某个td设置了宽度，那么table剩余的宽度会被其它td平分
• 给table设置的高度起的作用只是min-height的高度，当内容的高度高于设置的高度时，table会被撑高

display：table-row

• 给tr设置高度只起到min-height的作用，默认会平分table的高度。
• tr中的td默认高度会继承tr的高度，若给任一td设置了高度，其他td的高度也同样变高。适合多列等高布局
• 设置宽度、margin、都不起作用

display:table-cell

• td默认继承table的高度，且平分table的宽度
• 若table（display:table）不存在，给td设置的宽高不能用百分比只能用准确的数值
• 给td设置vertical-align: middle; td元素里面(除float、position:absolute)所有的块级、非块级元素都会相对于td垂直居中
• 给td设置text-align: center; td元素里面所有非block元素(除float、position:absolute)都会相对于td水平居中，虽然block元素不居中，但其中的文字或inline元素会水平居中

着重学习display:table-cell

在上面几个中，我们用display:table-cell用的比较多。与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

• 大小不固定元素的居中，上面已经说过给元素设置为text-align:center; vertical-align:middle;非块级元素会自动居中
• 两栏自适应布局
• 等高布局，tr中的td默认高度会继承tr的高度，若给任一td设置了高度，其他td的高度也同样变高。适合多列等高布局
• display:table-cell下的列表布局

参考：

• https://segmentfault.com/a/1190000007007885
• 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/