CSS中有一個(gè)非常實(shí)用的技巧，就是利用display屬性中的table和table-cell來(lái)實(shí)現(xiàn)垂直表格效果。

.table {
display: table;
}
.table-cell {
display: table-cell;
vertical-align: middle; /* 控制垂直對(duì)齊方式 */
}

以上是實(shí)現(xiàn)垂直表格的核心CSS代碼，接下來(lái)我們來(lái)看一個(gè)完整的示例：

<div class="table">
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
</div>

以上代碼中，我們首先創(chuàng)建了一個(gè)display屬性值為table的父元素，在父元素下創(chuàng)建三個(gè)display屬性值為table-cell的子元素，實(shí)現(xiàn)了垂直表格的基本布局。

通過(guò)這種方式創(chuàng)建的垂直表格不僅可以自適應(yīng)高度，還可以通過(guò)vertical-align屬性控制內(nèi)容的垂直對(duì)齊方式，非常實(shí)用。

最后，需要注意的一點(diǎn)是，table-cell元素必須放在table元素內(nèi)使用才能實(shí)現(xiàn)垂直表格的效果。