title: CSS rotate content in table cell and height adjustment
body: <p>I have a html table, and the column widths are fixed. I have content in one column that needs to be rotated 270 degrees. The length of the content is dynamic and can vary. I have the code below, but the problem is when it rotates, firstly the width of the table cell expands and the height doesnt and as a result the content just goes upwards and disappears. And also it doesnt align to the bottom of the cell.</p>
  
  <p>I would like the width of the cell to remain the fixed with that I have defined but the height needs to auto adjust. Here is a JSFiddle:  <a href="https://jsfiddle.net/d7c4q924/1/" rel="nofollow noreferrer">https://jsfiddle.net/d7c4q924/1/</a></p>
  
  <p>And here is the code I have currently:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .container{
  width:100%; 
  display: inline-block; 
  white-space: nowrap; 
  transform: rotate(270deg); 
  transform-origin: left top 0;
  }
  &lt;/style&gt;
  
  
  
  &lt;table border="1" width="600px"&gt;
  &lt;tr&gt;
  &lt;td width="100px"&gt;column1&lt;/td&gt;
  &lt;td width="100px"&gt;&lt;span class="container"&gt;this column has a dynamic length string&lt;/span&gt;&lt;/td&gt;
  &lt;td width="100px"&gt;column3&lt;/td&gt;
  &lt;td width="300px"&gt;column4&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>