表のヘッダーテキスト変換

Question

変換します。テーブルヘッダー内のテキストの一部は、2,3ワードで作成され、一部はシングルワードで作成されます。

ここではそれがどのように見えるかです：http://img571.imageshack.us/img571/9527/tbl.png

私が欲しいのは、すべての列が関係なく、どのように長い名前のヘッダーで、同じ幅を持っていない、と名前が2行最大にするために入れていることです。

編集： 例：

http://jsfiddle.net/SvAk8/

.header { 


-webkit-transform: rotate(270deg); 
-moz-transform: rotate(270deg); 
-ms-transform: rotate(270deg); 
-o-transform: rotate(27deg); 
transform: rotate(270deg); 
white-space: pre-line; 
width: 50px; 
height: 180px; /* to be adjusted: column is not always tall enough for text */ 
margin: 0 -80px; 
vertical-align: middle; 

}

Answer 1

この仕様を追加：

table { width: 100%; table-layout: fixed; } 

はこれを行う：

表と列の幅は、テーブルとCOL 要素の幅により、または細胞の最初の行の幅で設定されています。 以降の行のセルは、列幅に影響を与えません。

と指定された幅が必要です。詳細については、https://developer.mozilla.org/en-US/docs/CSS/table-layoutを参照してください。私がこれまでに得たものがベストです

Answer 2

OK！私は再調査を行い、ブラウザは変換後に二次元を計算しないようです。

Rotate Text as Headers in a table (cross browser)

私はあなたが唯一の選択肢とそのだと思う：JavaScriptを。

は自分の良い行の高さを見つけると、ページの読み込みが幅を変更した後。

Answer 3

：

$(document).ready(function() { 

    (function() { 
    var maxW = 0, 
     maxH = 0; 

    $("td.header").each(function() { 

     $cell = $(this); 

     $dummyDiv = $("<div></div>", { 
     text: $cell.text() 
     }); 

     // Replaces the original text for a DummyDiv to figureout the cell size before the rotation 
     $cell.html($dummyDiv); 

     if ($cell.width() > maxW) maxW = $cell.width(); 
     if ($cell.height() > maxH) maxH = $cell.height(); 
    }); 

    $("td.header").each(function() { 
     // Applies the rotation and then the size previosly calculated 
     $(this) 
     .addClass("rotate") 
     .width(maxH + 10) 
     .height(maxW + 10); 
    }); 
    })(); 
}); 

あなたがここでライブデモを見ることができます：http://jsfiddle.net/Lrr3G/

を、私はそれは私があなたを助けることはできません:)