0

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?

Community
  • 1
  • 1
cppprog
  • 796
  • 3
  • 10
  • 21

2 Answers2

0

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.

bencripps
  • 1,999
  • 3
  • 16
  • 27
  • The width doesn't change though. The format is great, but now the third column is taking up way more width than it needs. And I don't want to hard code the width of the column, because if a `` is wide, then the width should increase to accommodate. – cppprog Aug 15 '14 at 00:37
  • Ok, try this: http://jsfiddle.net/uo44ub6L/1/ This is super hacky, but you're resizing the span, so the containg th size isn't adjusted, and thus will increase based on their contents. – bencripps Aug 15 '14 at 00:52
0

You can use

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

this will get the work done for you , Here is JSFiddle of it .

GameCode
  • 1
  • 1