văn bản theo chiều dọc cho nhãn trong cột tiêu đề

Question

Tôi đang cố gắng tạo một bảng có Văn bản dọc ngay trên bảng tiêu đề.

Đây là mã css của tôi:

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

Dưới đây là bản demo http://codepen.io/anon/pen/GnveJ

Như bạn có thể nhìn thấy nó hoạt động một phần. Tôi muốn có các cột (các ô của cột có tên) chiều rộng phù hợp chính xác với nội dung (khoảng 50 px); giống như hình ảnh tôi đính kèm với câu hỏi này.
Bất kỳ ý tưởng nào là cách tốt nhất để tạo mã css hoặc mã js cho mục đích này?

Yêu cầu:
Tôi đang sử dụng ít hơn và jquery

Answer 1

Bọc tên người dùng trong một span, xoay đó, và thiết lập một width trên các tế bào. Nếu bạn xoay các ô, bảng sẽ hiển thị kích thước của nó trước khi nó xoay văn bản.

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