📅 最后修改于: 2023-12-03 15:11:54.894000 🧑 作者: Mango
在HTML中，表格单元格（<td>）是一个常见的元素，用于在表格中显示数据。有时，我们需要在单元格中显示垂直文本，以更好地适应我们的布局。
使用CSS可以实现在表格单元格中显示垂直文本的效果。我们可以使用CSS的writing-mode属性设置单元格中文本的方向，从而实现垂直文本的效果。
td.vertical {
writing-mode: vertical-rl; /* 设置文本垂直显示 */
}
然后在HTML中为需要显示垂直文本的单元格添加vertical类：
<table>
<tr>
<td>第一列</td>
<td class="vertical">第二列</td>
<td>第三列</td>
</tr>
</table>
这样，第二列中的文本就会以垂直方向显示。
HTML5中引入了<text>元素，可以用于在表格单元格中显示垂直文本。
<table>
<tr>
<td>第一列</td>
<td>
<text x="0" y="0" transform="rotate(-90)">第二列</text>
</td>
<td>第三列</td>
</tr>
</table>
这里，我们将第二列文本绕中心旋转了-90度，实现了垂直文本的效果。
需要注意的是，<text>元素只能在SVG命名空间中使用，因此需要在HTML文档中引入相应的命名空间声明：
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<table>
...
</table>
</body>
</html>
以上两种方法都能实现在表格单元格中显示垂直文本的效果，具体选择哪种方法取决于你自己的需求和技术水平。