Javascript 标题列中标签的垂直文本

我正在尝试制作一个在标题表上有垂直文本的表格

以下是我的CSS代码：

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

这是演示

正如您所看到的，它部分工作。 我希望列（有名称的列的单元格）的宽度正好适合内容（大约50像素）；与本问题所附图片相同。
你知道制作css代码或js代码的最佳方法是什么吗

要求：

---

我正在使用less和jquery

将用户名包装在一个

span

中，旋转它，并在单元格上设置一个

宽度。如果旋转单元格，表格将在旋转文本之前呈现其大小

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

他用得更少了。将
.rotate（）
（混音）更改为
-webkit变换：旋转（90度）（带有所有供应商前缀）用于普通CSS。它会旋转，但不适合宽度：（+1）它工作得很好。只是我想将标签居中。谢谢。