I am trying to make a table with Vertical Text just on the header table.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With