垂直文本用于标题列中的标签 [英] vertically text for the label in the header column

问题描述

我想在表头上创建一个包含垂直文本的表格。

I am trying to make a table with Vertical Text just on the header table.

这是我的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代码？

As you can see it works partially. I would like to have the columns (the cells of the column where there are the name) which width fits exactly the contents (about 50 px); the same as the pic I attached to this question.
Any idea what is the best way to make the css code or js code for this purpose?

需求：

我使用less和jquery

Requirement:
I am using less and jquery

推荐答案

在 span 中包含用户名，旋转它，在单元格上设置 width 。如果旋转单元格，表格将在旋转文本之前呈现其大小。

Wrap the username in a span, rotate that, and set a width on the cells. If you rotate the cells, the table will render its size before it rotates the text.

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

演示

这篇关于垂直文本用于标题列中的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！