CSS nth-child im Zusammenspiel mit rowspan

[Thomas Binder]

Hallo,

ich habe folgendes kleine Problem:
In einer Tabelle sollen bestimmte benachbarte Spalten immer in 2er-Blöcken farblich hervorgehoben werden, weil sie zusammengehören. Das Ganze beginnt erst ab der 3. Spalte. Gelöst habe ich das bisher über folgendes CSS-Konstrukt:
table.doppel td:nth-child(4n+3) {background-color:#DCDCDC;}
table.doppel td:nth-child(4n+4) {background-color:#DCDCDC;}
Damit werden die 3. und 4. Spalte eingefärbt, dann wieder die 7. und 8. Spalte usw.

Das funktioniert auch wunderbar - mit folgender Ausnahme.
Wenn man in einer links davon liegenden Spalte mit "rowspan" arbeitet, also z.B. rowspan="2"
dann kommt die Abzähllogik durcheinander. Die farbliche Anpassung verrutscht um eine Spalte.
Die zweite Zeile hat dann ja in der HTML-Struktur eine Spalte weniger, in der optischen Darstellung aber natürlich nicht.

Hat jemand eine Idee, wie man dies durch eine noch bessere CSS-Formulierung lösen kann?
Natürlich könnte ich in der betreffenden Zeile im <td> per CSS direkt formatieren, aber das möchte ich eigentlich vermeiden.

Vielen Dank im Voraus
Thomas

[Gunnar Bittersmann]

@@Thomas Binder:

nuqneH

table.doppel td:nth-child(4n+3) {background-color:#DCDCDC;}
table.doppel td:nth-child(4n+4) {background-color:#DCDCDC;}
Das funktioniert auch wunderbar - mit folgender Ausnahme.
Wenn man in einer links davon liegenden Spalte mit "rowspan" arbeitet, also z.B. rowspan="2"
dann kommt die Abzähllogik durcheinander.
Hat jemand eine Idee, wie man dies durch eine noch bessere CSS-Formulierung lösen kann?

Von hinten anfangen zu zählen? :nth-last-child

Qapla'

[Thomas Binder]

Von hinten anfangen zu zählen? :nth-last-child

Qapla'

Klingt nach einer plausiblen Idee :-)
Ich werde es mal ausprobieren. Danke.

[Thomas Binder]

Klingt nach einer plausiblen Idee :-)
Ich werde es mal ausprobieren. Danke.

... erweist sich dann aber leider doch nicht als die Lösung.

Es werden ja dabei (je nach konkreter Spaltenzahl) die vorderen "Führungsspalten" mit einfärbt. Die sollen aber den Farbwechsel nicht mitmachen...

Man müsste dann noch gezielt die Spalten 1 und 2 adressieren, damit sie in der Standard-Hintergrundfärbung erscheinen. Und spätestens da würde das Rowspan-Thema wieder zuschlagen, wenn Spalte 2 gar nicht Spalte 2 ist...

Tja, da komme ich wohl nicht um eine direkte Eintragung der Formate herum oder muss eben auf Rowspan-Mimik verzichten :-(

[Worf]

Hallo,

Es werden ja dabei (je nach konkreter Spaltenzahl) die vorderen "Führungsspalten" mit einfärbt. Die sollen aber den Farbwechsel nicht mitmachen...

Spricht etwas dagegen für diese Spalten das <th>-Element zu nutzen?

Gruss,
Worf

[Thomas Binder]

Hallo,

Es werden ja dabei (je nach konkreter Spaltenzahl) die vorderen "Führungsspalten" mit einfärbt. Die sollen aber den Farbwechsel nicht mitmachen...

Spricht etwas dagegen für diese Spalten das <th>-Element zu nutzen?

Gruss,
Worf

Dagegen spricht sicher die Semantik von <th>, was ja Überschriften meint. Als Krücke wäre es gangbar... Da aber im vorliegenden Fall <th>-Elemente wiederum anders formatiert sind (Fettdruck) wäre auch dann Handarbeit angesagt.

Gruß
Thomas

[Matthias Apsel]

Om nah hoo pez nyeetz, Thomas Binder!

Dagegen spricht sicher die Semantik von <th>, was ja Überschriften meint. Als Krücke wäre es gangbar... Da aber im vorliegenden Fall <th>-Elemente wiederum anders formatiert sind (Fettdruck) wäre auch dann Handarbeit angesagt.

Wenns denn Überschriften sind:

<table>  
  <thead>  
    <tr>  
      <th>Name</th><th>D</th><th>En</th>...  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th>Müller</th><td>1</td><td>3</td>  
    </tr>  
     <tr>  
      <th>Meier</th><td>4</td><td>2</td>  
    </tr>  
  </tbody>  
</table>

Spaltenüberschriften: thead th
Zeilenüberschriften: tbody th

Matthias