Question

我有一个表格，其中包含一些包含通过CSS旋转的文本的标签。我遇到的问题是，该内容并没有垂直扩展。这是我的标记的基本示例：

HTML：

<table>
    <thead>
        <th>
            <div class="rotated-text">Some Text</div>
        </th>
        <th>
            <div class="rotated-text">Some More Text</div>
        </th>
        <th>
            <div class="rotated-text">Even More Text</div>
        </th>
    </thead>
</table>

CSS：

.rotated-text {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
}

示例：http://jsfiddle.net/UPFkX/1/

Answer 1

包含的元素无法扩展，因为css转换（和IE过滤器）不会影响box model。

问马克·米尔滕堡：

如果我没有弄错，元素是正常流动的一部分或者是漂浮，好像他们没有变形。一旦他们的位置建立，然后执行转换或转换。该转型或转型不会对此产生任何影响文件流或任何浮动。

您可以在SO here找到类似问题的答案。

实际上，转换后的元素的width属性实际上会改变它的可见“高度”，而height属性会改变它的可见“宽度”。简而言之：

使用css转换，它是被转换的外观，而不是元素本身或它对文档流的“影响”。

虽然可能对您有所帮助（取决于案例）：

将每个已转换元素的height属性设置为width（以像素为单位）。这将以你想要的方式影响它们的容器高度。

修改

正如Juan Rangel在回答中所说，你可以用javascript来解决问题。我完全同意这一点 - 他对jquery的处理方式与我上面谈到的相同。如果您无法分辨转换后的元素有多高，那么这甚至可能是更好的解决方案，但请记住（小部分）客户端不允许您使用javascript。无论如何，你不得不妥协妥协。

Answer 2

对您的代码进行一些编辑。

删除div并将class"rotated-text"添加到th。添加此javascript
$(".verticalTableHeader").each(function(){$(this).height($(this).width())})

确保您的页面调用jQuery。

http://jsfiddle.net/UPFkX/3/

当内容旋转文本时，包含元素不垂直扩展

2 个答案: