CSS布局——display:table-cell; 與display:table;

“display:table;”的CSS聲明能夠讓一個HTML元素和它的子節點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會産生因為使用了table那樣的制表标簽所導緻的語義化問題。

使用案例：

<style>
.container {
display: table;
}

.row {
display: table-row;
}

.cell {
display: table-cell;
width: px;
height: px;
border: px solid blue;
padding: em;
}
</style>

<div class=”container”>
<div class=”row”>
<div class=”cell”>CELL A</div>
<div class=”cell”>CELL B</div>
<div class=”cell”>CELL C</div>
</div>
</div>
           

注：如果某個元素被設定為“display:table-row;”，而它的父節點沒有被設定為“display:table;”（或者“display:table-row-group;”），浏覽器将會建立一個被設定為“display:table;”的匿名盒對象來嵌套它