vertically text for the label with avatar in the header column

Question

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

the result should be like this:

So my questions are:
1) what should I do in my css file in order to have the text rotate of 270deg (making .rotate(270deg); messes everything )
2) the name aligned on the top of the avatar?
3) it works on google chrome but not firefox :(

Here is my demo: http://codepen.io/anon/pen/CogKe

Here is my code:

.rotate(@deg){
  -webkit-transform: rotate(@deg);

}
table th.user span.name{
  display:block;
  .rotate(90deg);
  padding: 190px 0 0 0;
  position: relative;
  left: 20px;
  width: 200px;
}
table, td, th
{
border:1px solid green;
}
.user, tbody td {
  max-width: 50px;
  text-align: center
}

score 0 · Answer 1 · edited May 23 '17 at 11:48

Try This to avoid cross browser text rotation problem

.rotate {
     -moz-transform: rotate(270deg);  /* FF3.5+ */
       -o-transform: rotate(270deg);  /* Opera 10.5 */
  -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=270);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=270)"; /* IE8 */
}

Vertical (rotated) text in HTML table

vertically text for the label with avatar in the header column

1 Answers1