テーブルのセルと高さの調整でCSSの内容を回転させます

Question

私はhtmlテーブルを持っていて、列の幅は固定されています。私は270度回転する必要があるコンテンツを1つの列に持っています。コンテンツの長さは動的であり、変更することができます。私は以下のコードを持っていますが、問題は、回転すると、まずテーブルのセルの幅が広がり、高さが変わってコンテンツが上向きになって消えます。また、それは細胞の底に整列しません。

私が定義したセルの幅は固定されていますが、高さは自動調整する必要があります。ここで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)'; 
} 

javacriptをwindow.onloadイベントに配置する必要があります。 ここに私のフィドルです：https://jsfiddle.net/d7c4q924/5/