在CSS中,我們可以使用writing-mode
屬性將表格中的文字變成豎的,這個(gè)屬性可以指定文本的方向,包括水平、垂直等,在垂直模式下,文本會(huì)從上到下依次排列,非常適合展示表格中的長(zhǎng)文本。
以下是一個(gè)示例代碼,展示如何將表格中的文字變成豎的:
<table> <tr> <td>姓名</td> <td>年齡</td> <td>性別</td> </tr> <tr> <td>張三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> </table>
table { writing-mode: vertical-rl; border-collapse: collapse; } td { border: 1px solid #000; padding: 10px; }
在這個(gè)示例中,writing-mode: vertical-rl;
將表格中的文字設(shè)置為從右到左垂直排列。border-collapse: collapse;
合并了表格的邊框,使表格更加緊湊。border
和padding
屬性則用于美化表格單元格的外觀。
你可以根據(jù)需要調(diào)整這些樣式,以適應(yīng)不同的布局需求,希望這個(gè)示例能幫助你實(shí)現(xiàn)表格文字的豎排效果!