テキストのオーバーフローなしで自動高さのあるテーブルヘッダーに縦書きのテキストを表示するにはどうすればよいですか？

Question

CSS変換プロパティを使用して、回転したテキストを表のヘッダーとして表示したいとします。必要に応じてヘッダー行は、その高さを調整する必要がありますが、代わりに回転したテキストだけで溢れて：

demo fiddle

私の質問は、どのように必要に応じて成長するテーブルヘッダを取得するには？基本的に、それは次のようになります。

Answer 1

これは古い質問と同じように、縦の余白や埋め込みについての情報や注意によく似ています（親の幅を参照番号とする）。

あなたは擬似要素と垂直方向のパディングを使用している場合、あなたはbasicly正方形のボックスまたは<td>を1枚引いてもよい： http://jsfiddle.net/qjzwG/319/

.verticalTableHeader { 
    text-align:center; 
    white-space:nowrap; 
    transform-origin:50% 50%; 
    transform: rotate(90deg); 

} 
.verticalTableHeader:before { 
    content:''; 
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */ 
    display:inline-block; 
    vertical-align:middle; 
} 

あなたは小さな幅i番目<td>を維持したい場合は、table-layout:fixed + widthかもしれません助けて。 http://jsfiddle.net/qjzwG/320/

.verticalTableHeader { 
    text-align:center; 
    white-space:nowrap; 
    transform: rotate(90deg); 

} 
.verticalTableHeader p { 
    margin:0 -100% ; 
    display:inline-block; 
} 
.verticalTableHeader p:before{ 
    content:''; 
    width:0; 
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */ 
    display:inline-block; 
    vertical-align:middle; 
} 
table { 
    text-align:center; 
    table-layout : fixed; 
    width:150px 
} 

あなたは、テーブルにはまだそれが文書のDIR /方向と反対に行う可能性がありますhudge負のマージンでラッパーを使用して、<th>の幅からのコンテンツではなくだから成長することができるようにしたい場合は、次の明らかに、あなたのニーズに最も近い、http://jsfiddle.net/qjzwG/320/

<table border="1"> 
    <tr> 
     <th class="verticalTableHeader"><p>First</p></th> 
     <th class="verticalTableHeader"><p>Second-long-header</p></th> 
     <th class="verticalTableHeader"><p>Third</p></th> 
    </tr> 

.verticalTableHeader { 
    text-align:center; 
    white-space:nowrap; 
    transform: rotate(90deg); 
} 
.verticalTableHeader p { 
    margin:0 -999px;/* virtually reduce space needed on width to very little */ 
    display:inline-block; 
} 
.verticalTableHeader p:before { 
    content:''; 
    width:0; 
    padding-top:110%; 
    /* takes width as reference, + 10% for faking some extra padding */ 
    display:inline-block; 
    vertical-align:middle; 
} 
table { 
    text-align:center; 
} 

デモとベースから

HTML：writing-mode：http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

Answer 2

はよく...私はこれが最善の解決策ではありません知っていますが、クライアント側のJavaScriptを使用して、それを修正することができます。 jQueryのでは、次のようになります。

$(".verticalTableHeader").each(function(){$(this).height($(this).width())}) 

純粋なHTMLやCSSの解決のためとして、私はこれは、ブラウザの制限だと思います。

Answer 3

はまさにそのない新しい（実験）CSS3の機能があります。古いIEの場合

<table border="1"> 
    <tr> 
     <th class="verticalTableHeader">First</th> 
     <th class="verticalTableHeader">Second</th> 
     <th class="verticalTableHeader">Third</th> 
    </tr> 
    <tr> 
     <td>foo</td> 
     <td>foo</td> 
     <td>foo</td> 
    </tr> 
    <tr> 
     <td>foo</td> 
     <td>foo</td> 
     <td>foo</td> 
    </tr> 
    <tr> 
     <td>foo</td> 
     <td>foo</td> 
     <td>foo</td> 
    </tr> 
</table> 

は、あなたが書き込みモード（CSS）を使用する必要があります。

あなたは、テーブルセルの内側のdivにそれを適用する必要があります。

.vrt-header th { 
 
    writing-mode: vertical-lr; 
 
    min-width: 50px; /* for firefox */ 
 
}

<table class='vrt-header'> 
 
    <thead> 
 
    <tr> 
 
     <th>First</th><th>Second</th><th>Third</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>foo</td><td>foo</td><td>foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>foo</td><td>foo</td><td>foo</td> 
 
    </tr> 
 
    <tr> 
 
     <td>foo</td><td>foo</td><td>foo</td> 
 
    </tr> 
 
    </tbody> 
 
</table>