在設計網頁時,表格是不可避免的元素之一。而使用豎直的表格樣式能帶來一種獨特的外觀,并且可以更好地展示數據。
下面我們就來看一下如何使用CSS來實現豎直的表格樣式。
table { border-collapse: collapse; } table td { padding: 10px; border: 1px solid black; text-align: center; } table th { background-color: gray; color: white; padding: 10px; border: 1px solid black; text-align: center; writing-mode: vertical-rl; transform: rotate(180deg); }
首先,我們需要設置表格的邊框和內距。然后,我們可以將表格的標題單元格(th)旋轉90度,使其水平變為豎直的。這里我們使用了CSS3的寫作模式(writing-mode)屬性和transform屬性。writing-mode屬性用于設置文字的書寫方向,transform屬性用于設置元素的旋轉角度。同時,我們還可以對表格的單元格(td)進行基本的樣式設置。
下面是使用上述代碼實現的豎直表格效果:
姓名 | 年齡 | 職業 |
---|---|---|
張三 | 20 | 工人 |
李四 | 25 | 醫生 |
王五 | 30 | 教師 |
以上就是豎直表格樣式的一個基本實現方法,可以根據需要進行個性化的樣式設置,達到更好的視覺效果。