标题列中标签的垂直文本

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 px); 和我在这个问题上附上的图片一样.
知道为此目的制作css代码或js代码的最佳方法是什么？

要求:
我使用less和jquery

Answer 1

将用户名包装成a span,旋转,然后width在单元格上设置.如果旋转单元格,表格将在旋转文本之前呈现其大小.

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;
}

演示