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

【问题标题】：Vertical (rotated) text in HTML table headersHTML 表格标题中的垂直（旋转）文本
【发布时间】：2014-10-08 17:23:58
【问题描述】：

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

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

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

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

现在已经有 2-4 年没有提出这些问题了，有什么新的解决方案可以解决这个问题吗？

【问题讨论】：

【解决方案1】：

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

CSS：

thead th {
    height: 130px;
}

另一种方法是使用rowspan="5" 创建一个更大的th，但您需要添加一些空白行，您会得到相同的效果。两者都行。

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

【讨论】：

宽度没有改变。格式很好，但现在第三列占用的宽度超出了它的需要。而且我不想硬编码列的宽度，因为如果<td> 很宽，那么宽度应该增加以适应。
好的，试试这个：jsfiddle.net/uo44ub6L/1 这太hacky了，但是你正在调整span的大小，所以包含的大小没有调整，因此会根据它们的内容增加。跨度>

【解决方案2】：

你可以使用

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

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

【讨论】：