Hallo,
Ich möchte gerne eine Tabelle erstellen, in dessen Kopfdatenzellen der Text vertikal steht, sprich 90° gegen den Uhrzeigersinn gedreht. Das geht grundsätzlich mittels
transform: rotate(-90deg);
(für Firefox, gibt aber ähnliche transform Befehle für jeden aktuellen Browser)
Mein Problem:
Ich will das
a) die Spaltenbreite einen definierten Wert hat, z.B. width:50px;
b) der vertikale Text im Spaltenkopf KEINEN Zeilenumbruch besitzt.
Das habe ich nicht hinbekommen, da der Browser vorher die Tabelle ohne rotierten Text rendert => Spaltenbreite auf über 50px vergrößert => und erst danach den Text dreht.
Das 2. (kleinere) Problem wäre dann noch die Postitionierung des rotierten Textes genau an den bottom der Kopfzelle, also links ausgerichtet (mittels
transform-origin, transform-translateX, transform-translateY oder doch auch mittels anderen Positionierungsmethoden wie position, left, bottom oder gar margin und padding?)
Hat da jemand der Profis eine Idee, bin echt gespannt. Ich hab das trotz vieler CSS-Spielerei nicht hinbekommen..