title: how to rotate text left 90 degree and cell size is adjusted according to text in html
body: <p>Suppose i have table with some rows and column,so i want to rotate text in cells something like this<br>:
  <img src="https://i.stack.imgur.com/vJoVh.png" alt="enter image description here"></p>
  
  <p>problem is  when i rotate text using style :<br></p>
  
  <pre><code>#rotate {
       -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
         -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
               filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
           -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
  </code></pre>
  
  <p>it all get messed up like this<br></p>
  
  <p><strong>html code:</strong><br></p>
  
  <pre><code>&lt;table cellpadding="0" cellspacing="0" align="center"&gt;
      &lt;tr&gt;
          &lt;td id='rotate'&gt;10kg&lt;/td&gt;
          &lt;td &gt;B&lt;/td&gt;
          &lt;td &gt;C&lt;/td&gt;
          &lt;td&gt;D&lt;/td&gt;
          &lt;td&gt;E&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id='rotate'&gt;20kg&lt;/td&gt;
          &lt;td&gt;G&lt;/td&gt;
          &lt;td&gt;H&lt;/td&gt;
          &lt;td&gt;I&lt;/td&gt;
          &lt;td&gt;J&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id='rotate'&gt;30kg&lt;/td&gt;
          &lt;td&gt;L&lt;/td&gt;
          &lt;td&gt;M&lt;/td&gt;
          &lt;td&gt;N&lt;/td&gt;
          &lt;td&gt;O&lt;/td&gt;
      &lt;/tr&gt;
  
  
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>css:</strong><br></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  td {
      border-collapse:collapse;
      border: 1px black solid;
  }
  tr:nth-of-type(5) td:nth-of-type(1) {
      visibility: hidden;
  }
  #rotate {
       -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
         -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
               filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
           -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
  }
  &lt;/style&gt;
  </code></pre>