2

我有一个带有一些标签的表格，其中包含通过 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/

4

2 回答 2

7

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

引用 Marco Miltenburg 的话：

如果我没记错的话，元素是正常流程的一部分，或者是浮动的，就好像它们没有被转换一样。一旦确定了它们的位置，就执行转换或转换。转换或过渡将不再对文档流或任何浮动产生任何影响。

你可以在这里找到他对 SO 上类似问题的回答。

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

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

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

Set the height property of each transformed element to it's width in pixels. That will influence their containers height just the way you want it.

EDIT:

As Juan Rangel said in his answer, you could go for javascript to solve the problem. I totally agree on that - what he would do with jquery is the same thing I was talking about above. If you can not tell how tall the transformed elements will be, that might even be the better solution, but keep the (small amout of) clients in mind that don't allow you to use javascript. Anyways, you'll have to compromise unfortunately.

于 2013-03-29T23:38:13.123 回答
1

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

删除div并添加class"rotated-text"到您的th. 添加这个 javascript
$(".verticalTableHeader").each(function(){$(this).height($(this).width())})

确保您的页面调用 jQuery。

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

于 2013-03-29T23:34:23.950 回答