问题
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.
However, none of the answers seem to actually work: here is my attempt in a JSFiddle.
The text can rotate, but the <th> elements don't resize properly, which was the whole point of trying to rotate the text.
Now that it's been 2-4 years since those questions have been asked, are there any new solutions to this problem?
回答1:
You could use CSS to select the thead and size the rows accordingly:
DEMO: http://jsfiddle.net/uo44ub6L/
CSS:
thead th {
height: 130px;
}
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.
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.
来源：https://stackoverflow.com/questions/25318555/vertical-rotated-text-in-html-table-headers