Transformacja tekstu nagłówka tabeli

Question

Użyłem transformacji: rotate (270deg) dla nagłówka tabeli, ale ponieważ nazwy w tym nagłówku nie są równe (nawet bliskie) wygląda brzydko, więc muszę uczynić każdą kolumnę równą szerokością. Część tekstu w nagłówku tabeli składa się z 2 lub 3 słów, niektóre są pojedynczymi słowami.

Oto jak to wygląda: http://img571.imageshack.us/img571/9527/tbl.png

wszystko czego chcę, jest to, że każda kolumna ma taką samą szerokość, bez względu na to jak długo jest w nagłówku nazwę i nazwę położyć się na 2 rzędy max.

Edit: Przykład:

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

Dodaj specyfikacji:

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

wykonuje to:

szerokości stołowe i kolumna są przez szerokości stołu i kol elementów lub szerokość pierwszego rzędu ogniw . Komórki w kolejnych wierszach nie mają wpływu na szerokości kolumn.

i wymaga określonej szerokości. Aby uzyskać więcej informacji, patrz https://developer.mozilla.org/en-US/docs/CSS/table-layout.

Answer 2

OK! Zrobiłem rezerwację i wygląda na to, że przeglądarki nie będą obliczać wymiarów po transformacji.

Rotate Text as Headers in a table (cross browser)

myślę, że masz tylko jedną opcję i jej: JavaScript;

Znajdź dobrą wysokość linii, a po wczytaniu strony zmień szerokość.

Answer 3

To najlepsze, co mam do tej pory:

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

można zobaczyć na żywo demo tutaj: http://jsfiddle.net/Lrr3G/

Mam nadzieję, że może pomóc :)