CSS旋轉表格單元格和高度調整內容

Question

我有一個html表格，列寬是固定的。我有一列需要旋轉270度的內容。內容的長度是動態的，可以變化。我有下面的代碼，但問題在於它旋轉時，首先表格單元格的寬度擴大，高度變小，結果內容會向上並消失。並且它也不對齊到單元格的底部。

我想單元格的寬度保持固定，我已經定義了，但高度需要自動調整。這裏是一個的jsfiddle：https://jsfiddle.net/d7c4q924/1/

這裏是我的代碼有目前：

<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

我有一些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

你必須要在相同的值作爲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)'; 
} 

您應該將javascript放入window.onload事件中。 這是我的小提琴：https://jsfiddle.net/d7c4q924/5/