CSS rotate content in table cell and height adjustment

Question

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.

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: https://jsfiddle.net/d7c4q924/1/

And here is the code I have currently:

<style type="text/css">
.container{
width:100%; 
display: inline-block; 
white-space: nowrap; 
transform: rotate(270deg); 
transform-origin: left top 0;
}
</style>



<table border="1" width="600px">
<tr>
<td width="100px">column1</td>
<td width="100px"><span class="container">this column has a dynamic length string</span></td>
<td width="100px">column3</td>
<td width="300px">column4</td>
</tr>
</table>

Possible duplicate of http://stackoverflow.com/questions/6997631/how-to-display-vertical-text-in-table-headers-with-auto-height-without-text-ov — helb, Feb 24 '17 at 10:32

Alexandre Nicolas · Answer 1 · 2017-02-24T13:55:53.433

I did it perfectly with a bit of javascript:

HTML

<table border="1" >
  <tr>
    <td>column1</td>
    <td>
     <div class="container">
       this column has a dynamic length string
     </div>
    </td>
    <td>
     <div class="container">
       this column has a dynamic length string longer than the other
     </div>
    </td>
    <td>column4</td>
  </tr>
</table>

CSS

.container{
  position: relative;
  white-space: nowrap;
  transform-origin: left top 0;
  padding: 10px;
}

Javascript

You have to set padding variable at the same value as the padding in the css.

var containers = document.getElementsByClassName('container');
var maxWidth = 0;
var padding = 10;
for (i = 0; i < containers.length; i++) {
  var container = containers[i];
  if (container.clientWidth > maxWidth) maxWidth = container.clientWidth;
}
var i=0;
for (i = 0; i < containers.length; i++) {
  var container = containers[i];
  var width = container.clientWidth;
  var height = container.clientHeight;
  container.style.height = maxWidth + 'px';
  container.style.width = height + 'px';
  container.style.transform = 'rotate(270deg) translateX(-' + (maxWidth + padding) + 'px) translateY(' + padding + 'px)';
}

You should put the javascript into an window.onload event. Here is my fiddle: https://jsfiddle.net/d7c4q924/5/

What if I wanted to apply the div container that is linked to the javascript to other columns too? Tried to apply the same code to another cell but it didnt work. Only works on the first. Also, if I change the width of the cell how do I center it? currently it seems to only center based on 100px width. And also if I had more than one column with long values, then it should be bottom aligned — Ahmed, Feb 24 '17 at 11:31

CSS rotate content in table cell and height adjustment

1 Answers1