7

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

enter image description here

Here is my CSS code:

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

Here is the demo http://codepen.io/anon/pen/GnveJ

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?

Requirement:
I am using less and jquery

Brian Tompsett - 汤莱恩
  • 5,438
  • 68
  • 55
  • 126
Lorraine Bernard
  • 12,482
  • 22
  • 81
  • 133

1 Answers1

5

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

Demo

bookcasey
  • 37,335
  • 13
  • 73
  • 92