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/

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

1 个答案: