The vertical text for the label in the header column

Question

I am trying to create a table with vertical text only in the header table.

Here is my CSS code:

table th.user { .rotate(90deg); position: relative; padding-top: 190px; top: -10px; right: 0px; width: 200px; } 

Here is the demo http://codepen.io/anon/pen/GnveJ

As you can see, this works partially. I would like to have columns (cells of a column where there is a name) whose width exactly matches the content (about 50 pixels); same as me related to this issue. Any idea what is the best way to make css code or js code for this purpose?

Demand:
I use less and jquery

Answer 1

Wrap the username in span , rotate it and set width to cells. If you rotate the cells, the table will display its size before it rotates the text.

 table th.user span{ display:block; .rotate(90deg); padding: 190px 0 0 0; position: relative; left: 20px; width: 200px; } .user, tbody td { max-width: 50px; } 

Demo