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

Question

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

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。

引用 Marco Miltenburg：

如果我没记错的话，元素是正常流程的一部分，或者是 像没有变形一样漂浮。一旦他们的位置已经 建立，然后执行转换或转换。这 转型或过渡不会对 文档流或任何浮动了。

您可以在 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/