How to Rotate Text Left 90 Degree and Cell Size Is Adjusted According to Text in HTML

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>

How could I rotate table header cells and automatically adjust to content size?

When you want to change the write direction of the text, you can use writing-mode. In this case I use writing-mode: vertical-lr;, which makes the text vertical, and the container height will change to fit the text. We also need to rotate the text in place, but in the future I would use sideways-lr, which lacks support now.

th {
  background-color: #ccc;
}

th,
td {
  border: 1px solid #000;
}

.rotate span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

<table cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th class="rotate">
        <span>Foo</span>
      </th>
      <th class="rotate">
        <span>Foo Bar Bazz</span>
      </th>
      <th class="rotate">
        <span>FooBar</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Foo collection
      </td>
      <td>
        Foo Bar Bazz collection
      </td>
      <td>
        Foo Bar collection
      </td>
    </tr>
  </tbody>
</table>

Rotated text inside rowspaned cell and word wrap

Preventing wrapping in CSS is just:

white-space: nowrap;

(Other values may also be useful.)

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

How to size elements according to rotated text

You may use writing-mode

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

.columnHeader {  writing-mode:vertical-lr;  writing-mode:sideways-lr; /* FF or use transform and vertical-lr*/}
th {  background-color: #f88;  width: 1.2em;/* which means min-width according to the table-layout algorythm.*/}

<table>  <tr>    <th>      <div class="columnHeader">One of any length</div>    </th>    <th>      <div class="columnHeader">Two</div>    </th>  </tr>  <tr>    <td>1</td>    <td>2</td>  </tr></table>

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>

How to Rotate Text Left 90 Degree and Cell Size Is Adjusted According to Text in HTML