CSS: Tabellen umformatieren
Bei dem Beispiel wurde die Originaltabelle durch die folgenden Stildeklarationen umformatiert:
table#fluss tr \> th {display: none;}
table#fluss tbody tr {display: block}
table#fluss tr \> * {display: block; border:none}
table#fluss tr td:first-child {font-size:large; font-weight:bold}
table#fluss tr td:first-child + td:before { content: "Hauptort: "; font-weight:bold}
table#fluss tr td:first-child + td + td:before {content: "Beitritt: "; font-weight:bold}
table#fluss {border:none}
Was passiert hier genau? Der Trick ist, mit Selektoren geschickt die einzelnen Zellen neu umzubrechen und mit der Content-Eigenschaft richtig zu beschriften. Als erstes unterdrücken wir die Anzeige des Tabellenkopfs mit display:none. Die verschiedenen Anweisungen display:block führen dazu, dass die normalerweise nebeneinander angezeigten Zellen untereinander (mit Zeilenwechsel) dargestellt werden. Ferner werden über border:none die Rahmen ausgeblendet und über Schriftgrössen und font-weight-Angaben die einzelnen Haupteinträge hervorgehoben.
Über das content-Statement schaffen wir es, die einzelnen Zeilen zu beschriften (mit «Hauptort» und «Beitritt»).