issues with "Transform rotate"

[jamieh2os]

Thanks for your time in looking at this post.  I used the "transform rotate" command to rotate the text in a td cell of a table.  The text was rotated as beyond the limits of the table.  I noticed that only the text was rotated; not the td cell.  this is shown in the image with code and image above.  the other image shows the style sheet entries.  i tried to wrap all the td's in div and rotate them without any success.  The rotated text cannot be moved with margin, padding, and align options.  The table cells are in their original position with the text rotated out.  Any insight you can provide is greatly appreciated....thanks for your help

[BenPleysier · Accepted solution]

Wrap the headings in a DIV and a SPAN as in

<th class="rot"><div><span>Frank Salamri</span></div></th>

and write a few style rules as in

th.rot {

height: 140px;

white-space: nowrap;

}

th.rot > div {

  transform:

    /* magic numbers */

    translate(25px, 51px)

    /* adjust to suit*/

    rotate(315deg);

  width: 30px;

}

th.rot > div > span {

  border-bottom: 1px solid #ccc;

  padding: 5px 10px;

}