HTML表标题中的垂直（旋转）文本 [英] Vertical (rotated) text in HTML table headers

问题描述

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

My table headers are much wider than the data in the table, so I am trying to rotate the text in the headers to save space.

尝试此问题中的建议，我也看了一下在此和

I've been trying out the suggestions in this question, and I've also taken a look at this and this.

但是，没有任何答案似乎是错误的实际工作：这里是我尝试在 JSFiddle 。

However, none of the answers seem to actually work: here is my attempt in a JSFiddle.

文本可以旋转，但< th> 元素不会正确调整试图旋转文本的整个点。

The text can rotate, but the <th> elements don't resize properly, which was the whole point of trying to rotate the text.

现在，这些问题已经2-4年了，这个问题有什么新的解决方案吗？ / p>

Now that it's been 2-4 years since those questions have been asked, are there any new solutions to this problem?

推荐答案

您可以使用CSS选择 thead ：

You could use CSS to select the thead and size the rows accordingly:

演示： http://jsfiddle.net/uo44ub6L/

CSS：

thead th {
    height: 130px;
}

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

Another method would be to use rowspan="5" to create a larger th but you would need to add some blank rows, and you would get the same effect. Either would work.

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

If you need to do this dynamically, you could use javascript to select the th and adjust the size on the span length and font size.

这篇关于HTML表标题中的垂直（旋转）文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！