transform wenn Brwoser kleiner als... Positionsprobleme

[Michael P.]

Da bei der Anzeige auf kleinen Bildschirmen der Titel der einzelnen Zellen der Tabelle zu lang ist, möchte ich diese drehen. Nun ergibt sich folgendes Problem:

Ich bekomme die einzelnen Titel nicht bündig zur unteren Zelle und die Zelle sollte eigentlich den Titel umschliessen, dieser ragt allerdings aus der jeweilgen Zelle.

Ich habe ein Beispiel hier online hinterlegt. Der Effekt sieht man, wenn man den Browser verkleinert.

http://www.cssdesk.com/NPmrn

Danke für Eure Hilfe

Michael P.

table {
width:70%;
border-collapse: separate; /*Zellzwischenräume*/
border-collapse: collapse; /*keine Zell-Zwischenräume*/
}

td {
border: 1px solid #000; 
width:20%
}

h3{
 text-align: center;
}

@media all and (max-width: 700px){

h3{
transform-origin: 30% 0;
min-height:20px;
-moz-transform:rotate(-90deg); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(-90deg); /* Safari */
-o-transform:rotate(-90deg); /* Opera */
-ms-transform:rotate(-90deg); /* IE9 */
transform:rotate(-90deg); /* W3C */
background:#ff0000;
text-align: left;
}   
}

[Gunnar Bittersmann]

@@Michael P.

Da bei der Anzeige auf kleinen Bildschirmen der Titel der einzelnen Zellen der Tabelle zu lang ist, möchte ich diese drehen. Nun ergibt sich folgendes Problem:

Ich bekomme die einzelnen Titel nicht bündig zur unteren Zelle und die Zelle sollte eigentlich den Titel umschliessen, dieser ragt allerdings aus der jeweilgen Zelle.

Die Tabellenzellen schreren sich nicht darum, dass der Text gedreht wird. Erst rattert der Tabellenrendering-Algorithmus (d.h. der Browser bestimmt die Größe der Zellen), dann werden die Inhalte transformiert (gedreht).

Eine CSS-Lösung (ohne transform, sondern mit writing-mode) lässt noch auf sich warten. “Proposal to defer orthogonal table cells not resolved yet.” ED css-writing-modes-3]

Du müsstest wohl die Höhen der Kopfzellen je nach Maximallänge der längsten Spaltenüberschrift setzen. Die du nicht kennst. Und bei mehrzeiligen Spaltenüberschriften wird’s ganz blöd.

Ich glaube, eine vernünftige Lösung gibt es gegenwärtig noch nicht.

SVG?

LLAP 🖖

[MrMurphy1]

Hallo,

"vernünftige" Lösungen wie in Textverarbeitungen oder Tabellenkalkulationen sind mir auch nicht bekannt. Mir fallen zur Zeit nur beiden folgenden Möglichkeiten ein.

1. Du fügst bei den "@media ... 700px" folgendes hinzu, wobei die mind-width vom längesten Wort abhängig ist:

td {
   min-width: 5.5rem;
   height: 10rem; 
   vertical-align: bottom;
}

2. Schöner finde ich auf die Drehung zu verzichten und statt dessen halbwegs automatische Silbentrennungen mit "@shy;" einzufügen. Da es sich bei Tabellenüberschriften nur um wenige Worte handelt hält sich der Aufwand in Grenzen und die Besucher müssen nicht "Querlesen". Zusätzlich bleiben die Tabellenbreiten länger gleichmäßig, in deinem Beispiel bei 20%.

Der HTML-Quelltext könnte dann folgendermaßen aussehen:

<td><h3>Prag</h3></td>
<td><h3>Am&shy;ster&shy;dam</h3></td>
<td><h3>Wien</h3></td>
<td><h3>Za&shy;greb</h3></td>
<td><h3>Am&shy;ster&shy;dam</h3></td>

Gruss

MrMurphy

[Michael P.]

Hi @MrMurphy,

ich habe es mal mit deinem Tipp

td {
   min-width: 5.5rem;
   height: 10rem; 
   vertical-align: bottom;
}

versucht.

http://www.cssdesk.com/NPmrn

wobei ich hier zwei Probleme auftauchen:

1. beim IE ist es nicht bündig zur Bottom, sondern schießt über das Ziel hinaus.

2. Was aber viel gravierender ist, ich bekomme die Tabelle, die einzelnen Spalten, nicht schmaler.

zu @LLAP,ich habe die Zeilen herausgenommen

[MrMurphy1]

Hallo,

darauf hat Gunnar Bittersmann ja bereits hingewiesen

Die Tabellenzellen schreren sich nicht darum, dass der Text gedreht wird. Erst rattert der Tabellenrendering-Algorithmus (d.h. der Browser bestimmt die Größe der Zellen), dann werden die Inhalte transformiert (gedreht).

In Breite und Höhe bleibt also immer der Platz reserviert, den den ungedrehte Text einnimmt. Daran lässt sich aktuell, jedenfalls nur mit HTML und CSS, nichts ändern. Mit JavaScript kenne ich mich nicht aus.

Das ist auch ein Grund warum ich die Lösung nicht einsetzen würde. Wie schon geschrieben gibt es (noch?) keine sinnvolle Lösung um Texte zu drehen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Michael P.

-moz-transform:rotate(-90deg); /* Firefox 3.6 Firefox 4 */

Wie schon im Kommentar steht, ist das prähistorisch. Firefox unterstützt transform seit Ewigkeiten präfixfrei. Weg mit der Zeile!

-webkit-transform:rotate(-90deg); /* Safari */

Noch ja. Ab 9 unnötig. Und auch Android 4 möchte noch Präfixe haben.

-o-transform:rotate(-90deg); /* Opera */

Zum einen unterstützte selbst Presto transform zuletzt präfixfrei. Zum anderen ist Presto tot. Weg mit der Zeile!

-ms-transform:rotate(-90deg); /* IE9 */

Wenn’s denn sein muss.

Muss es wohl aber nicht. Teste mal, ob der 9er noch writing-mode: tb-rl[^1] (entspricht nicht der gegenwärtigen Spec[^2]) unterstützt.

LLAP 🖖