在使用Bootstrap的過程中，發現很多地方都應用了display:table-cell，決定好好研究一下table-cell的用法。
display:table-cell簡述
display:table-cell是指讓元素以表格單元格的形式來表現。目前所有主流瀏覽器都支持display:table-cell。display:table-cell的瀏覽器兼容性。
使用了display:table-cell的元素設置margin值無效，但padding值是有效的，所以如果要在設置了table-cell的元素上應用margin，需要再包裹一層元素。另外如果設置了display:table-cell的元素的父元素不是display:table-row，父元素的父元素不是display:table，那么瀏覽器會自動創建相應的匿名元素，使得DOM層次結構符合table/inline-table>table-row>table-cell三層嵌套關系，這就是”匿名創建表格元素規則”。
利用display:table-cell創建等高布局
table表格中每一行單元格都等高，設置了display:table-cell的一組元素也有同樣的特點。
利用display:table-cell創建兩欄自適應布局
Bootstrap中的輸入框組就使用了table-cell來實現兩欄自適應。
其中input-add-on的寬度設置為1%，這是一個CSS Hack。我們可以看到input-group-addon的寬度為34px，這個單元格的寬度為整個表格寬度的1%，所以設置了display:table的元素的width為34*100px，因為table元素的最大寬度不能超過其父元素的寬度，同時瀏覽器會保證所有的設置table-cell的元素的寬度總和等於table元素的寬度，這樣就實現了輸入框元素的寬度自適應。
利用display:table-cell創建等寬布局
具體代碼如下：
HTML：
<div id="wrapper"> <ul class="lists"> <li class="item"><a href="#">One</a></li> <li class="item"><a href="#">Two</a></li> <li class="item"><a href="#">Three</a></li> <li class="item"><a href="#">Four</a></li> <li class="item"><a href="#">Five</a></li> </ul> </div>
CSS：
#wrapper {
width: 960px;
margin: 100px auto;
}
.lists {
display: table;
width: 100%;
border-collapse: collapse;
}
.lists .item {
display: table-cell;
width: 1%;
text-align: center;
border: 1px solid black;
}
.lists .item a {
display: block;
padding: 25px;
color: white;
background: gray;
}
.lists .item a:hover {
color: yellow;
background: #979797;
}