CSS: Writing-Mode

[joschilein]

Ich möchte eine Tabelle machen, in der einige Tabellenköpfe um 90° gedreht sind und jede diese Spalten somit auch nur 1em breit (und hoch) ist.

Eigentlich ist dafür ja writing-mode gedacht. Nur unterstützt das ja kein eigentlich vernünftiger Browser (IE, wow wow) und so versuche ich das irgendwie zu faken. Sämtliche auffindbaren Hilfen beschäftigen sich mit dem Drehen (-> transform: rotate) ganzer Blöcke und nicht mit Tabelleninhalten. Wenn ich das direkt auf das th-Element anwende, wird sogar die Hintergrundfarbe unschön aus dem Rahmen gerissen.

Mein momentaner Ansatz wäre zwar etwas undynamisch (ich gebe ja dann eine Höhe vor), funktioniert nur leider auch nicht:

<table>
<tr>
<th><span>Langer Inhalt 1</span></th>
<th><span>Langer Inhalt 2</span></th>
<th><span>Langer Inhalt 3</span></th>
<th><span>Langer Inhalt 4</span></th>
</tr>
...
<table>

table th {
  background: #008000;
  height: 200px;
  width: 1em; /* px tuts auch nicht*/
}

table th span{
  -moz-transform: rotate(90deg);
  width: 200px;
  background: #00FF00;
  display:inline-block;
}

Das ist die einzige Kombination, in der der Text im Span ordentlich aussieht (ohne width z.B. zusammengeschoben auf die Breite des längsten Wortes = die Breite der Tabellenzelle). Nur sorgt das width natürlich für ein Aufspannen des kompletten Tabellenkopfes, also jeder einzelnen Spalte. Ich habe schon diverse position-Modifikationen versucht, aber dann rutschen mir die Spans komplett aus der Tabelle.

Irgendeine Idee?

 

[kbot]

kannst du evtl. ein Beispiel zeigen?

weil ich verstehs nicht so ganz ^^

 

[joschilein]

Ziel ist 2a mit schmaleren Spalten

1a) Kein Block, gedreht


1b) Kein Block, nicht gedreht


2a) Block, gedreht


2b) Block, nicht gedreht

 

[tleilax]

Ich habe da vorhin auch mal etwas rumgespielt und vermute, dass die Gecko-Engine vom Mozilla mit den rotierten Elementen noch nicht ganz sauber umgehen kann. Wie man in Deinem dritten Beispiel sieht, werden die <th>s ja immer so breit und hoch wie der innenliegende <span> breit ist. Auch entsprechende "overflow: hidden"-Angaben und eine feste Breite des <th> ändert da nichts dran.

Da es scheinbar eh hässlich werden muss:

Wie dynamisch muss das Ganze denn sein? Sprich: Verändert sich die Position der <th> durch den restlichen Inhalt der Tabelle? Wenn nicht, könntest Du ja vielleicht die einzelnen <span>s einfach absolut innerhalb des Tabellenkopfes positionieren. Mit dem Selektor "th:nth-child(<1-X>) span" kannst Du die ja einzeln ansprechen und ausrichten.

[edit]

Es geht so halbwegs, aber die Rahmen zerhaut's total. Falls Du damit leben kannst:

https://dabblet.com/gist/1590220

 

[joschilein]

Im IE scheint das Thema auch nicht so ganz zu funktionieren. Zwar wird hier per writing-mode ordnungsgemäß die Richtung umgestellt, aber auch damit werden die Spalten aufgespannt.

Die hier aufgeführten Befehle von #63 funktionieren auch nicht. Echt unglaublich, dass das Thema schon rund 10 Jahre in der Luft hängt. Ich hatte vorhin noch irgendeine Mozilla-Seite, in der das eigentlich schon für Gecko 3.5 als funktionierend angegeben wurde, aber irgendwie finde ich die auch gerade wieder nicht.

Ich glaube übrigend, dass die Rotation an sich schon ordnungsgemäß funktioniert. Transform soll ja scheinbar keinen Einfluss auf den Textfluss haben - muss ja auch nicht immer 90° sein. Nur warum dann mit position nicht weiter kommt. Mir fehlt jetzt aber auch die Erfahrung, ob das ein generelles Problem im Zusammenspiel von Tabellen und Positionierung ist.

Deine Beispielseite geht bei mir nicht. Wenn sie wirklich so grausam ist hilft das aber auch nicht weiter. Man sollte schon noch problemlos erkennen können, welcher Kopf zu welcher Spalte gehört.

Ach menno, überall gibt es irgendwelche anderen Haken. Da muss ich mir für das Thema wohl doch ein paar Excel-Makros bauen

 

[theHacker]

Ach menno, überall gibt es irgendwelche anderen Haken. Da muss ich mir für das Thema wohl doch ein paar Excel-Makros bauen

Doofe Idee: Wie wärs, wenn du den vertikalen Text in Form eines Bilds platzierst? Is das ne Option?
Du könntest entweder die Texte vorher alle in Bilder umrechnen lassen oder dynamisch per Script.

 

[joschilein]

Habe ich auch schon mal kurz dran gedacht. Könnte in dem Fall sogar wirklich noch eine Option sein, insbesondere da das nicht für externe Besucher gedacht ist.