CSS旋转表格单元格中的内容和高度调整

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>

Answer 1

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/