Html 包含内容具有旋转文本时未垂直扩展的元素

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

HTML:

---

示例：

对代码进行一些编辑

删除

div

并将

类“旋转文本”

添加到

th

中。 添加此javascript

$（“.verticalTableHeader”）.each（function（）{$（this）.height（$（this.width（））}）

确保页面调用jQuery

---

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

致库特·马可·米尔顿堡：

如果我没弄错的话，元素是正常流程的一部分，或者 浮动，好像它们没有被转换。一旦他们的立场被改变 建立，然后执行转换或转换。这个 转换或过渡不会对系统产生任何影响 文档流或任何浮动

你可以找到他对类似问题的答案

实际上，转换元素的

width

属性现在实际上会更改其可见的“height”，而

height

属性会更改其可见的“width”。简言之：

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

有什么可能帮助您（视情况而定）：

将每个变换元素的

高度

属性设置为其

宽度

（以像素为单位）。这会影响他们的容器高度，就像你想要的那样

编辑：

正如胡安·兰格尔（Juan Rangel）在他的回答中所说的，您可以使用javascript来解决这个问题。我完全同意这一点——他会用jquery做什么与我上面所说的相同。如果您不知道转换后的元素有多高，那么这可能是更好的解决方案，但请记住（少量）客户端不允许您使用javascript。

---

无论如何，不幸的是，你不得不妥协。

你还应该包括

-o-transform:rotate（-90度）th{padding:5px；}

这将使宽度为30px。现在，如果你像这样添加填充

padding:1px 2px 3px 4px

，它现在从左边开始，然后顺时针移动。我的意思是，通过css转换旋转文本会使元素在视觉上旋转，但是它仍然占据了与未旋转相同的空间。这导致表格标题占用的空间与它们在视觉上没有旋转时一样大，它们都与文本的行高一样宽。下面是一个示例来演示我的意思：jsfiddle.net/UPFkX/6

<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>

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