HTML表格标题中的垂直（旋转）文本

Question

我的表格标题比表格中的数据宽得多，所以我试图旋转标题中的文字以节省空间。

我一直在尝试this question中的建议，我也看了this和this。

然而，似乎没有一个答案真正起作用：这是我在JSFiddle中的尝试。

---

文本可以旋转，但<th>元素无法正确调整大小，这是尝试旋转文本的重点。

既然问了这些问题已经有2到4年了，这个问题还有新的解决方案吗？

Answer 1

您可以使用CSS选择thead并相应地调整行的大小：

DEMO：http://jsfiddle.net/uo44ub6L/

CSS：

thead th {
    height: 130px;
}

另一种方法是使用rowspan="5"来创建更大的th，但是您需要添加一些空白行，您将获得相同的效果。要么工作。

如果您需要动态执行此操作，可以使用javascript选择th并调整跨度长度和字体大小。

Answer 2

你可以使用

writing-mode: vertical-rl; text-orientation: mixed;

这将为您完成工作，这是JSFiddle。