在網頁中，通常我們都會使用表格來展示數據。而傳統的表格都是水平排列的，但是有時候我們也需要一些不同的排列方式來更好地展示數據。那么今天，就來介紹一種不同于傳統表格布局的方式——CSS豎向表格。

.table {
display: table;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
border: 1px solid #000;
padding: 10px;
width: 100px;
height: 50px;
text-align: center;
vertical-align: middle;
}

與傳統表格不同的是，CSS豎向表格是將行和列對調，也就是說，行變成了列，列變成了行。為了實現這種效果，我們需要使用display屬性來定義元素的顯示方式。

首先，我們需要將整個表格定義為一個塊級元素，并且使用display: table;來使其表現為一個表格。接著，我們需要指定每一行應該如何展示，所以我們可以定義一個class為的元素，并使用display: table-row;來讓它表現為一行。最后，我們需要定義每個單元格應該如何展示，這時我們可以定義一個class為的元素，并使用display: table-cell;來讓它表現為單元格。

除了以上的基本樣式，我們還需要指定每個單元格的邊框、寬度、高度、內邊距及文本對齊方式。在豎向表格中，由于單元格的高度通常固定，所以我們需要使用vertical-align: middle;來使得單元格文本居中對齊。

通過以上代碼，我們已經實現了CSS豎向表格的基本樣式。當然，為了讓表格更美觀，我們還可以進行一些樣式的調整，例如調整單元格背景色、字體大小、字體樣式等等。但總的來說，CSS豎向表格是一個比較簡潔、實用的表格布局方式。