testo verticale per l'etichetta nella colonna di intestazione

Question

Sto provando a creare una tabella con Testo verticale solo nella tabella di intestazione.

Ecco il mio codice css:

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

Ecco la demo http://codepen.io/anon/pen/GnveJ

Come si può vedere che funziona parzialmente. Mi piacerebbe avere le colonne (le celle della colonna dove c'è il nome) la cui larghezza si adatta esattamente al contenuto (circa 50 px); lo stesso della foto che ho allegato a questa domanda.
Qualche idea su quale sia il modo migliore per fare il codice css o il codice js per questo scopo?

Requisito:
Sto usando meno e jquery

Answer 1

Avvolgere il nome utente in un span, ruotare quello, e impostare un width sulle cellule. Se ruoti le celle, la tabella renderà le sue dimensioni prima che ruoti il ​​testo.

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