transform wenn Brwoser kleiner als... Positionsprobleme

[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