包含的元素在内容旋转文本时不会垂直扩展 [英] Containing element not expanding vertically when content has rotated text

问题描述

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

HTML：

 <表> 
< thead> 
< th> 
< div class =rotated-text>一些文字< / div> 
< / th> 
< th> 
< div class =rotated-text>更多文字< / div> 
< / th> 
< th> 
< div class =rotated-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/

解决方案

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

删除 div 并添加类rotated-text到你的 th 。
添加此javascript

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

确保你的页面调用jQuery。

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

I have a table with some th tags that contain text that is rotated via CSS. The problem I have is that the th is not expanding vertically with the content. Here is a basic example of the markup I have:

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); 
}

Example: http://jsfiddle.net/UPFkX/1/

解决方案

A few edits to your code.

Remove the div and add the class"rotated-text" to your th. add this javascript
$(".verticalTableHeader").each(function(){$(this).height($(this).width())})

Make sure your page calls on jQuery.

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

这篇关于包含的元素在内容旋转文本时不会垂直扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！