2

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/

4

2 に答える 2

7

css 変換 (および IE フィルター) はボックス モデルに影響を与えないため、含まれる要素は展開できません。

マルコ・ミルテンバーグを引用するには：

私が間違っていなければ、要素は通常のフローの一部であるか、変換されていないかのように浮かんでいます。それらの位置が確立されると、変換または遷移が実行されます。変換またはトランジションは、ドキュメント フローまたはフローティングに影響を与えなくなります。

SO hereに関する同様の質問に対する彼の回答を見つけることができます。

実際にwidthは、変換された要素のプロパティは実際に表示される「高さ」heightを変更し、プロパティは表示される「幅」を変更します。要するに：

CSS 変換では、要素自体やドキュメント フローへの「影響」ではなく、外観が変換されます。

ただし、何が役立つか（ケースによって異なります）：

height変換された各要素のプロパティをwidthピクセル単位に設定します。これにより、コンテナの高さが思いどおりに影響されます。

編集：

Juan Rangel が回答で述べたように、javascript を使用して問題を解決できます。私はそのことに完全に同意します - 彼が jquery で行うことは、私が上で話したのと同じことです。変換された要素の高さがわからない場合は、それがより良い解決策かもしれませんが、javascript を使用できない (少数の) クライアントを念頭に置いてください。とにかく、残念ながら妥協する必要があります。

于 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 に答える