强大的 table 布局

为什么要使用 table 布局

在我刚开始学习前端的时候（2015年），我看的很多教程都说让我避免使用 table 布局，有人还列出了 table 布局的 九宗罪 ，基本的观点就是 table 布局会有一堆 table tbody tr td 这些乱七八糟的标签，另外也不符合语义。

但是， display: table-* 这个属性的出现以及普及，让 table 布局又重新换发了生机，这个属性 IE8+ 的浏览器都支持。

下面我们来看一下强大的 table 布局的各种使用场景。

动态垂直、水平居中

我们使用几行代码就可以轻松地实现垂直水平居中了，子元素可以自适应宽高。

/* 实现水平居中的核心代码 */.parent { text-align: center;}.child { display: inline-block;}/* 实现垂直居中的核心代码 */.parent { display: table-cell; vertical-align: middle;}

但是这样的话，会有一个很致命的缺点，就是 .parent 元素无法设置百分比的宽高，这样我们就没有办法让 .parent 撑满其父元素。

不过，我们可以这样修改以上代码。

<!-- parent 元素外面先加一层 wrap --><div class="wrap"> <div class="parent"> <div class="child"> <p>自适应宽高的垂直、水平居中</p> <p>支持 IE8+</p> </div> </div></div>

/* 给 wrap 设置 display: table; *//* 这样就可以给 wrap 设置百分比宽高了 */.wrap { display: table;}

这样就可以给 .wrap 设置百分比宽高了， .parent 会自动充满 .wrap

动态水平居中

.child { display: table; margin: auto;}

多列等高、等分布局

.parent { display: table; table-layout: fixed;}.child { display: table-cell;}

动态粘性页脚

粘性页脚要满足两个条件：

1. 内容不超过 main body 的时候，页脚固定在页面底部
2. 内容超过 main body 的时候，页脚跟在 main body 后面

/* 核心代码 */.parent { display: table; height: 100%; width: 100%;}.main { height: 100%;}.footer { display: table-row; height:1px;}

圣杯布局

/* 核心代码 */.parent { display: table; table-layout: fixed;}.parent > div { display: table-cell;}.left,.right { width: 200px;}

元素两端对齐

/* 核心代码 */.parent { display: table;}.parent > div { display: table-cell;}.left { text-align: left;}.right { text-align: right;}