宽度不适用于iE中的旋转

Question

我有一些表，看起来像这样（在Chrome，Opera，FF中）：

但是IE（7,8,9）浏览器会像这样显示此表：

问题：如何调整列宽？

我有两个css类： 对于td标签：

.td__vertical{
         text-align:center;
         vertical-align:bottom;
         border:  1px double  #8EB340 ;
         font-size:11px; 
         color:#666; 
         background-color: #F0F4E7; 
         padding: 0px 0px 20px 0px;
         margin: 0px 0px 0px 0px;
         width:30px;
}

和div，位于td标签内：

.rotated{
        transform: rotate(-90deg); 
        -webkit-transform: rotate(-90deg); 
        -moz-transform: rotate(-90deg);
        -o-transform-origin:      0 0;
        -o-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        -ms-transform: rotate(-90deg);
        white-space: nowrap; 
        width: 30px;
}

所以专栏描述如下：

<td class="td__vertical"><div class="rotated" >Column2 Column2 Col..</div></td>

Chrome，Opera，FF对“宽度：30px;”作出反应在“旋转”类和“td__vertical”中的“宽度”无关紧要。但IE没有使用它们中的任何一个。 通过“矩阵”的旋转具有相同的效果。

UPD：我探讨了列宽是文本的宽度，即未旋转状态下文本的宽度。那么，如何关闭列的自动调整宽度？

Answer 1

如果您不关心IE中的文本从上到下阅读，那么您可以使用书写模式：

-ms-writing-mode: tb-lr;

这相当于轮换90degs，无法模仿-90degs

当然，您需要删除filter: progid和ms-transform。

http://msdn.microsoft.com/en-us/library/ie/ms531187(v=vs.85).aspx