javascript - 标题列中标签的垂直文本

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 代码的最佳方法是什么吗？

要求:
我正在使用 less 和 jquery

Answer 1

将用户名包裹在 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;
}

Demo