ヘッダー列のラベルの垂直方向のテキスト

Question

ヘッダーテーブルの上に垂直テキストを含むテーブルを作成しようとしています。ここで

私のCSSコードです：あなたはそれが部分的に働く見ることができるようにここで

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

はデモhttp://codepen.io/anon/pen/GnveJ

です。 私は、幅が正確に内容に合った（約50ピクセル）列（名前がある列のセル）を持っていたいと思います。私はこの質問に添付された写真と同じです。
この目的のためにCSSコードまたはjsコードを作成する最良の方法は何ですか？

要件：
私は、より少ないとjQuery

Answer 1

ラップspanにユーザー名を使用していますがいることを回転し、そして細胞上のwidthを設定します。セルを回転すると、テキストが回転する前にテーブルのサイズがレンダリングされます。私にOnestly

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