nicht angemeldet
vertikaler Text in Tabellenkopf
0 
Matthias Apsel
0 Matthias Apsel
0 0 Matthias Apsel
vertikaler Text in Tabellenkopf
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..
-
Om nah hoo pez nyeetz, Bastian!
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.
Hier könnte
overflow:hidden;das Mittel der Wahl sein.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?)text-align: left?Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Bastian!
Hat da jemand der Profis eine Idee, bin echt gespannt. Ich hab das trotz vieler CSS-Spielerei nicht hinbekommen..
Ich hab das gerade mal an einfachen Tabellen ausprobiert und kann das nicht nachvollziehen, kannst du einen Link posten?
Matthias
--
1/z ist kein Blatt Papier.
-
<html> <head> <title>Vertikaler Tabellenkopf</title> </head> <body> <table border="1" style="margin-left:200px; margin-top:200px;"> <tr> <td style="background-color:#0f0; width:50px; transform: rotate(-90deg); transform-origin:0px 0px">Der erste Tabellenkopf</td> <td>Der zweite Tabellenkopf</td> </tr> <tr> <td>Zelle 1</td> <td>Zelle 2</td> </tr> </table> </body> </html>Achtung:Rotation funktioniert nur im Firefox, da ich hier mal auf die alternativen CSS-Rotationsbefehle verzeichtet hab
Also ich will, dass Zellenspalte 1 genau 50px breit ist UND der Text des Tabellenkopf 1 einzeilig UND der Tabellenkopftext 1 genau mittig unten in seiner Zelle beginnt.
-
Om nah hoo pez nyeetz, Bastian!
Über Tabellen solltest du noch viel lernen: etwa im Wiki http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Tabellenformatierung
Achtung:Rotation funktioniert nur im Firefox, da ich hier mal auf die alternativen CSS-Rotationsbefehle verzeichtet hab
Es gibt keine CSS-Befehle
Also ich will, dass Zellenspalte 1 genau 50px breit ist
table-layout: fixed;erlaubt solche festgelegten Breiten, allerdings nur, wenn auch eine Gesamtbreite vorgegeben ist.UND der Text des Tabellenkopf 1 einzeilig
white-space: nowrap;UND der Tabellenkopftext 1 genau mittig unten in seiner Zelle beginnt.
Damit der dann auch einen grünen Hintergrund hat, musste ich ein wenig tricksen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Vertikaler Tabellenkopf</title> <style type="text/css">~~~css table {
table-layout: fixed;
border-collapse: separate;
margin: 200px 0 0 200px;
width: 150px;
}
td {
border: 1px solid;
}
th:first-child {
-moz-transform: rotate(-90deg);
white-space: nowrap;
text-align: left;
width: 50px;
}
th:first-child span {
background: green;
padding: 16px 4px;
margin-left: 4px;
}~~~html </style> </head> <body> <table> <thead> <tr> <th><span>Der erste Tabellenkopf</span></th> <th>Der zweite Tabellenkopf</th> </tr> </thead> <tbody> <tr> <td>Zelle 1</td> <td>Zelle 2</td> </tr> </tbody> </table> </body> </html>Aber ich gebe zu: Richtig schön ist das nicht.
Matthias
--
1/z ist kein Blatt Papier.
-
Hey, danke
- das ist ja schenial! Hätt nicht damit gerechnet, das dies tatsächlich funktioniert. Der entscheidende Hinweis was, das width:50px nur in Zusammenhang mit einer Gesamttabellenbreite funktioniert.
Wo lernt man bitte solche Details?
Mit table-layout: fixed; und nowrap habe ich selber zuvor auch schon experimentiert, aber ohne das gewünschte Gesamtresultat.
Was noch zu fragen bliebe: Nach der Rotation grenzt der Headertext nicht automatisch an die obere Kante der unteren Zelle an. Eine Verschiebung ist nötig, wie bei dir mittels
padding: 16px 4px;
margin-left: 4px;Ist das eh die empfohlene Variante, oder doch eher mittels transform-translateX, transform-translateY oder position:absolute etc?
-
Om nah hoo pez nyeetz, Bastian!
Wo lernt man bitte solche Details?
Bei SELFHTML ;-)
Was noch zu fragen bliebe: Nach der Rotation grenzt der Headertext nicht automatisch an die obere Kante der unteren Zelle an.
Warum sollte er? transform-origin legt ein anderes Drehzentrum fest. Im Normalfall sollte es der Diagonalenschnittpunkt der Element-Box sein. Das Spielen mit margin und padding war für mich intiutiver als das Umherprobieren mit anderen Eigenschaften.
Matthias
--
1/z ist kein Blatt Papier.
- das ist ja schenial! Hätt nicht damit gerechnet, das dies tatsächlich funktioniert. Der entscheidende Hinweis was, das width:50px nur in Zusammenhang mit einer Gesamttabellenbreite funktioniert.
-
-
-