在CSS中,我們可以使用writing-mode
屬性將表格中的文字豎著排列,這個(gè)屬性可以指定文本的方向,例如從右到左或從上到下,在表格中,我們可以為特定的列設(shè)置writing-mode
屬性,使其中的文字豎著排列。
以下是一個(gè)示例,展示如何將表格中的文字豎著排列:
<table> <tr> <td>姓名</td> <td>年齡</td> <td>職業(yè)</td> </tr> <tr> <td>張三</td> <td>25</td> <td>工程師</td> </tr> <tr> <td>李四</td> <td>30</td> <td>設(shè)計(jì)師</td> </tr> </table>
在CSS中,我們可以為特定的列設(shè)置writing-mode
屬性:
table { width: 300px; border-collapse: collapse; } td { border: 1px solid #000; padding: 10px; } /* 將職業(yè)列的文字豎著排列 */ td[data-label="職業(yè)"] { writing-mode: vertical-rl; /* 從上到下 */ transform: rotate(180deg); /* 旋轉(zhuǎn)180度 */ }
在這個(gè)示例中,職業(yè)列的文字會(huì)豎著排列,并且會(huì)旋轉(zhuǎn)180度,使其從上方開(kāi)始并向下延伸,你可以根據(jù)需要調(diào)整writing-mode
屬性的值,例如vertical-lr
(從左到右)或vertical-rl
(從右到左),使用transform: rotate(180deg)
可以確保文字從上方開(kāi)始。