Vertical (Rotated) Text in HTML Table

Creating HTML table with vertically oriented text as table header

I don't believe you can get the height of the <th> to change when rotating it's contents with CSS alone. Below is how I do this with a bit of jQuery.

http://jsfiddle.net/tsYRQ/1004/

How can I properly rotate a text inside a table cell

You can use writing-mode: vertical-rl; combined with a scale transformation:

table {  text-align: left;  border-collapse: collapse;}
td,th {  border: 1px solid lightgrey;  padding: 0px 3px;}
td:not(:first-child) {  min-width: 140px;}
.table_title_top {  text-align: center;}
.table_title_left {  text-align: center;  width: 35px;}
.table_title_left div {   writing-mode: vertical-rl;   white-space:nowrap;   transform:scale(-1);}

<!DOCTYPE html><html lang="en" dir="ltr">
<head>  <meta charset="utf-8"></head>
<body>  <table>    <tbody>      <tr>        <td></td>        <td colspan="100" class="table_title_top">          <div>Title Top Title Top</div>        </td>      </tr>      <tr class="calc-tr calc-tr-title">        <td rowspan="100" class="table_title_left">          <div>Title Left Title Left</div>        </td>        <td>0</td>        <td>0</td>        <td>0</td>      </tr>      <tr>        <td>0</td>        <td>0</td>        <td>0</td>      </tr>      <tr>        <td>0</td>        <td>0</td>        <td>0</td>      </tr>    </tbody>  </table></body>
</html>

Vertical alignment and positioning of rotated text in a table or grid

I have a different solution to your problem using CSS grid layout:

Note the change in markup without using tables. Create a grid layout using display: grid - note that the in the markup is for an empty grid item.
Make a three-column layout with min-content width using grid-template-columns: repeat(3, min-content) on the outer container.
Fit the second row to the height of the middle element by using grid-template-rows: 1fr min-content

For the vertical alignment, I am using writing-mode:

.wmode {
   writing-mode: tb-rl;
   transform: rotate(-180deg);
}

See demo below:

.container {  display: grid;  grid-template-columns: repeat(3, min-content);  grid-template-rows: 1fr min-content;  justify-content: center;}
.c10 {  font-variant: small-caps;}
.text-body-2-western {  text-align: center;  text-indent: 0em;}
.wmode {  writing-mode: tb-rl;  transform: rotate(-180deg);}

<div class="container">     <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>     <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>  <img src="https://via.placeholder.com/400x338?text=image">  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>     <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>   </div>

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>