vertikal Text für das Etikett in der Kopfzeile

Question

Ich versuche, eine Tabelle mit Vertical Text nur in der Header-Tabelle zu machen.

Hier ist meine CSS-Code:

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

Hier ist die Demo http://codepen.io/anon/pen/GnveJ

Wie man sehen kann es teilweise funktioniert. Ich hätte gerne die Spalten (die Zellen der Spalte, in der der Name steht), deren Breite genau dem Inhalt entspricht (ca. 50 px); das gleiche wie das Bild, das ich dieser Frage beigefügt habe.
Irgendeine Idee, was ist der beste Weg, um den Css-Code oder Js-Code für diesen Zweck zu machen?

Voraussetzung:
Ich verwende weniger und jquery

Answer 1

Wickeln Sie den Benutzernamen in einem span, drehen, dass und ein width auf die Zellen gesetzt. Wenn Sie die Zellen drehen, rendert die Tabelle ihre Größe, bevor sie den Text dreht.

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