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

我有一个html表格，列宽是固定的。我有一列需要旋转270度的内容。内容的长度是动态的，可以变化。我有下面的代码，但问题在于它旋转时，首先表格单元格的宽度扩大，高度变小，结果内容会向上并消失。并且它也不对齐到单元格的底部。CSS旋转表格单元格和高度调整内容

我想单元格的宽度保持固定，我已经定义了，但高度需要自动调整。这里是一个的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>

来源

2017-02-24 Ahmed

可能的重复http://stackoverflow.com/questions/6997631/how-to-display-vertical-text-in-table-headers-with-auto-height-without-text -ov – helb

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

来源

2017-02-24 10:52:18 Kornflexx

如果我想将链接到javascript的div容器应用到其他列，该怎么办？试图将相同的代码应用到另一个单元，但它没有奏效。只适用于第一个。另外，如果我改变单元格的宽度，我该如何居中呢？目前它似乎只基于100px宽度的中心。而且，如果我有多个具有较长值的列，那么它应该是底部对齐的 – Ahmed

@Ahmed更新，它现在正在使用类 – Kornflexx

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

回答

相关问题