CSS表格設計是讓網頁排版變得更加美觀和整潔的一種方式。其中，豎過來的表格設計更是一種很特別也很有創意的表格排版方式。下面，我們來一起探討一下豎過來的CSS表格設計。
table {
border-collapse: collapse;
width: 100%;
}
td {
padding: 8px;
text-align: center;
border: 1px solid #ddd;
}
td:first-child {
border-left: none;
}
tr {
border-bottom: 1px solid #ddd;
}
tr:last-child {
border-bottom: none;
}
td.rotate {
height: 80px;
width: 80px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
td.rotate > div {
position: absolute;
top: 40px;
left: -20px;
width: 80px;
text-align: center;
font-size: 14px;
white-space: nowrap;
}首先，在CSS中定義一個table標簽的樣式，設置border-collapse屬性為collapse，這將使每個單元格的邊界完全重疊，形成整齊的表格。接下來，我們對td標簽進行樣式定義，包括設置內邊距為8像素，設置居中對齊方式，以及設置邊框為1像素的灰色虛線。
緊接著，為了避免表格看起來過于壓縮和擁擠，設置tr標簽的樣式，定義底部邊框為1像素的灰色虛線。同時，設置最后一個tr標簽的邊框為none，減少表格的過度壓縮感。
最后，我們來重點關注一下td.rotate樣式。這個方法是在一個單元格內創建一個
元素，并在其中包含文本內容，然后將單元格的高度和寬度設置為80像素，再將其中的
元素使用旋轉變換屬性rotate(-90deg)進行旋轉。
這樣，我們就實現了在網頁上豎過來的CSS表格設計。嘗試一下這個設計，您會發現，它非常適合用于處理某些需要展示大量數據的頁面，能夠讓頁面更加整潔和美觀。
上一篇css表格的顏色漸變色
下一篇css撐起父元素高度