How to Use CSS Rotate() in Th Table Tags

How to use CSS Rotate() in TH Table Tags

http://jsfiddle.net/t5GgE/1/

Specify a transformation origin on point (65, 60) for the headers, with no wrap allowed and make your td centered aligned.

th.rotate {
    white-space: nowrap;
    -webkit-transform-origin: 65px 60px;
    -moz-transform-origin: 65px 60px;
    -o-transform-origin: 65px 60px;
    -ms-transform-origin: 65px 60px;
    transform-origin: 65px 60px;
}

td.rights {
    text-align: center;
}

Update for IE8 and below

For IE8 and below you are forced to use Transformation matrices instead of rotate(270deg).
So, the correspondent rotation matrix for 270deg is [0, 1, -1, 0].

What you need to do, is add the following and should work just fine for IE8 and below:

th.rotate span {
    /* rotated text in IE renders very bad (unless you use clear type), so that even by making it normal, looks less bold but still bold */
    font-weight: normal\9; /* \9 is an hack for IE8 and below */
    letter-spacing: 3px\9; /* because is so bold, need to give letters some space to breath */

    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod = "auto expand");
    width: 150px\9;
    height: 150px\9;
    margin-right: -130px\9;
}

Final jsFiddle version

IE9 problem and workaround
In IE9, you will see a big black rectangle in the header section, and the reason to this bug is that IE9 recognizes both -ms-transform and filter. When both CSS are present, the browser simply renders a black area. To workaround this, I sugest you use conditional includes for IE9 to use -ms-transform only.

how to rotate text left 90 degree and cell size is adjusted according to text in html

You can do that by applying your rotate CSS to an inner element and then adjusting the height of the element to match its width since the element was rotated to fit it into the <td>.

Also make sure you change your id #rotate to a class since you have multiple.

A 4x3 table with the headers in the first column rotated by 90 degrees

$(document).ready(function() {  $('.rotate').css('height', $('.rotate').width());});

td {  border-collapse: collapse;  border: 1px black solid;}tr:nth-of-type(5) td:nth-of-type(1) {  visibility: hidden;}.rotate {  /* FF3.5+ */  -moz-transform: rotate(-90.0deg);  /* Opera 10.5 */  -o-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */  -webkit-transform: rotate(-90.0deg);  /* IE6,IE7 */  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE8 */  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";  /* Standard */  transform: rotate(-90.0deg);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table cellpadding="0" cellspacing="0" align="center">  <tr>    <td>      <div class='rotate'>10kg</div>    </td>    <td>B</td>    <td>C</td>    <td>D</td>    <td>E</td>  </tr>  <tr>    <td>      <div class='rotate'>20kg</div>    </td>    <td>G</td>    <td>H</td>    <td>I</td>    <td>J</td>  </tr>  <tr>    <td>      <div class='rotate'>30kg</div>    </td>    <td>L</td>    <td>M</td>    <td>N</td>    <td>O</td>  </tr>

</table>

90 degree text rotation in a table

We can do some CSS tricks by warping headers text inside DIV's and applying some rules on th and the DIV's inside it, then we can get more styling ability then we can shorten the width of header even if text is long.

Some thing like: I hope it helps for you, Thanks

th, td, table{
  border:solid 1px;
}

div.vertical{
  position: absolute;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); /* Safari/Chrome */
  -moz-transform: rotate(-90deg);    /* Firefox */
  -o-transform: rotate(-90deg);      /* Opera */
  -ms-transform: rotate(-90deg);     /* IE 9 */
}

th.vertical{
  max-width: 50px;
  height: 85px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: inherit;
}

<table>
  <tr>
    <th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th>
    <th class="risk-th" style="width: 4%">
      <!--Manuality-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Probability-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Gravity-->
    </th>
    <th class="risk-th" style="width: 4%">
      <!--Mitigation-->
    </th>

    <th class="vertical"><div class="vertical">Manuality</div></th>
    <th class="vertical"><div class="vertical">Probability</div></th>
    <th class="vertical"><div class="vertical">Gravity</div></th>
    <th class="vertical"><div class="vertical">Mitigation</div></th>
  </tr>
</table>

Rotating table header text with CSS transforms

‘transform’ alters the orientation of the entire element you declare it on, not the text content inside it. It's more like IE's ‘matrix’ property than ‘writing-mode’.

Crucially, transforming an element doesn't change how its content size is calculated (or how its parent's layout is affected by that size). CSS's algorithms for vertical and horizontal sizing are different and difficult enough to get right to being with; there's no real consistent way they could accomodate content with arbitrary rotation. So ‘transform’ is like using ‘position: relative’: it changes where the content is rendered, but not anything to do with layout size.

So if you want to include one in a table you'll need to set the cell's ‘height’ explicitly to accomodate the expected rotated ‘width’. If you don't know that in advance you could potentially hack it up with JavaScript, perhaps.

FWIW: for me on Fx3.1b3 the span is also rotated like the others. However on Windows with its horizontal-only anti-aliasing (ClearType) the rendering doesn't look great... a well-rendered image could come out considerably better.

Rotate text 270° in HTML/inlineSVG without fixed height?

Ah, never mind, I got it myselfs.

The secret is having it vertical-lr, so width and height are already correct. <br / >
Then all you have to do is rotate the text 180 degrees with transform-origin center...

Works in Chrome and Firefox and IE 11 & 10 (according to MDN backwards-compatible to IE9, but since ms-transform-rotate doesn't work properly, it degrades gracefully to only writing-mode vertical-lr if you omit ms-transform).

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode#Browser_compatibility

https://web.archive.org/web/20160320101147/https://msdn.microsoft.com/en-us/library/ms531187(v=vs.85).aspx

.blackhd
{
    vertical-align: bottom;
    width: 40px;
    #height: 100px;
    border: 1px solid hotpink;
    background-color: black;
    text-align: center;
}

.vert
{
    display: inline-block;
    color: white;
    #font-weight: bold;
    font-size: 15px;
    writing-mode: vertical-lr;
    #writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    transform-origin: center;
    transform: rotate(180deg);
    padding-top: 2mm;
    padding-bottom: 3mm;
}

<table>
    <tr>
        <td class="blackhd"><span class="vert">abc</span></td>
        <td class="blackhd"><span class="vert">defghijkl</span></td>
    </tr>
    <tr>
        <td>abc</td>
        <td>defghijklmnopqr</td>
    </tr>
</table>

Rotate an html table 90 degrees in the anticlockwise direction

The text inside the div also should be rotated by 90degrees.

So basically you just want the whole thing to be rotated as a block?

Maybe you should just use CSS?

#myTable {
    transform:rotate(270deg);
}

HTML Table with vertically rotated headers on the left side

I was able to solve this b treating each tag as it's own row and building the data on them individually.

    <table>
    <tr>
      <td rowspan="4" class="rotate">Header Text</td>
      <td class="rotate pole">SubHeader Text 1</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>

      <td class="rotate pole">SubHeader Text 2</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>
      <td class="rotate pole">SubHeader Text 3</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
    <tr>
      <td class="rotate pole">SubHeader Text 4</td>
      <td>
        <ul>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
          <li>text text text text text text text text</li>
        </ul>
      </td>
      <td>
        <ul class="no-ul-style">
          <li>6</li>
          <li>6</li>
          <li>6</li>
          <li>6</li>
        </ul>
      </td>
      <td>
        6
      </td>
    </tr>
  </table>

How to Use CSS Rotate() in Th Table Tags