Tabellenspalten & CSS

columns-css.jpg

Einfache Idee: David baut eine schöne, kleine Tabelle. Ausführung — nicht so einfach, wie gedacht.

Layoutmässig sollten die drei letzten Spalten oben im Bild, da sie ja Zahlen enthalten am rechten Rand ausgerichtet sein. Also schnell <col/><col class="numbers" span="3"/> eingefügt und davon ausgegangen, dass das Stylen jetzt losgehen kann. Dummgelaufen nur, dass das W3C bei col-Tags nur die CSS-Eigenschaften border, background, width und visibility zulässt. Warum auch immer (Hey! Gut, dass ich die Hintergrundfarbe ändern kann. Blöd nur, dass ich die Schriftfarbe nicht daran anpassen kann!). Ich hoffe, dass sich da was in CSS 3 ändert (das sich in 10 Jahren dann vielleicht auch mal etabliert hat — Hey! 21. Jahrhundert und so).

Die Lösung war dann schliesslich den Selektor „+“ zu verwenden, so werden die Styles auf td-Elemente angewandt, die auf td-Elemente folgen. Das passt genau, denn ich wollte alle Spalten ausser die erste nach rechts ausrichten. Hier ist der Code dazu:

table.ergebnisse td + td {
	text-align: right;
}

Den Selektor kann man natürlich auch noch mehrmals hintereinander anwenden um nur Spalten, die noch weiter hinten sind zu erreichen.

So bin ich dann doch noch zu meiner Tabelle gekommen. Das Ergebnis ist übrigens hier bei Jakobs Triathlon Blog zu finden.

Leave a Reply