tr:nth-child(2n):hover mit rowspan

[Jonkins]

Mit den Codes könnt ihr mein Problem ersichtlich machen.

<table>  
    <tr>  
        <td>Bli</td>  
        <td>Bli</td>  
        <td>Bli</td>  
    </tr>  
    <tr>  
        <td>Bli</td>  
        <td>Bli</td>  
        <td>Bli</td>  
    </tr>  
    <tr>  
        <td>Bli</td>  
        <td>Bli</td>  
        <td>Bli</td>  
    </tr>  
    <tr>  
        <td rowspan="2">Blah</td>  
        <td>Blah</td>  
        <td>Blah</td>  
    </tr>  
    <tr>  
        <td>Blah</td>  
        <td>Blah</td>  
    </tr>  
</table>

table {  
    width: 100%;  
}  
tr:nth-child(2n) {  
    background-color: #F4F4F4;  
}  
  
tr:nth-child(2n+1) {  
    background-color: #EAEAEA;  
}  
  
tr:hover {  
    background-color: #FFFFFF;  
}

Ich möchte, dass bei der Rowspan-Stelle die beiden Reihen die selbe Farbe bekommen, also nth-child im Grunde genommen einmal aussetzt. Das muss pro Tabelle aber auch öfter als 1x funktionieren. Außerdem muss der Hover-Effekt auch funktionieren, was er aktuell nicht wirklich tut :<
Das Ganze bestenfalls nur mit CSS. Kann mir hier vielleicht jemand helfen? Javascript ist keine Option :/

[Felix Riesterer]

Lieber Jonkins,

die Logik hinter dem Aufbau einer Tabelle und der hinter den CSS-Selektoren passen nicht 100%ig zusammen. In dem Moment, wo Du eine Zelle in mehrere Zeilen (tr) ausbreitest, ist sie dann in sowohl einer ungeraden als auch geraden Zeile, oder in nur einer davon? Welcher Selektor soll in diesem Fall auf CSS-Seite greifen?

Das Gleiche gilt natürlich auch für die Spalten: Wenn eine Zelle sich über mehrere Zeilen erstreckt, dann wird sie nur in der ersten Zeile notiert, fehlt folgerichtig in den folgenden Zeilen, sodass dort die Anzahl der Zellen nicht mehr mit CSS-Selektor-Logik "gefunden" werden kann. Oder woher soll CSS wissen, dass eine Zelle visuell anders gezählt werden muss, weil in der vorherigen Zeile sich eine Zelle über mehrere Zeilen erstreckt?

Ich befürchte, dass Du Dein Problem nur mit passenden Klassen in den Elementen lösen kannst. Da wird wohl entweder serverseitig das Gefummel mit abwechselnden Zeilen und Zellen gelöst werden müssen, oder Du generierst ohnehin statische Dokumente mit den passenden Klassen...

Liebe Grüße,

Felix Riesterer.

[Jonkins]

Vielen Dank Felix ^^' Genau das habe ich am Ende befürchtet, aber danke für die Hilfe :)

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Das Gleiche gilt natürlich auch für die Spalten: Wenn eine Zelle sich über mehrere Zeilen erstreckt, dann wird sie nur in der ersten Zeile notiert, fehlt folgerichtig in den folgenden Zeilen, sodass dort die Anzahl der Zellen nicht mehr mit CSS-Selektor-Logik "gefunden" werden kann.

Doch, mit dem ||-Kombinator oder :nth-column sollte das möglich sein (lies: werden).

Oder woher soll CSS wissen, dass eine Zelle visuell anders gezählt werden muss, weil in der vorherigen Zeile sich eine Zelle über mehrere Zeilen erstreckt?

„CSS“ muss das nicht wissen; der Renderer muss. Und der weiß es auch.

Mit geeigneten Selektoren kann man ihm per CSS seine Wünsche mitteilen.

Qapla'

[Gunnar Bittersmann]

@@Jonkins:

nuqneH

Ich möchte, dass bei der Rowspan-Stelle die beiden Reihen die selbe Farbe bekommen,

Das sollte mit tr[link:http://dev.w3.org/csswg/selectors-4/#relational@title=:has]([rowspan]) möglich sein (lies: werden).

also nth-child im Grunde genommen einmal aussetzt.

Das mit tr:has([rowspan]) ~ tr. Wenn sich rowspan über 3+ Zeilen erstrecken kann, wird’s komplizierter, aber machbar: Der Selektor muss bei geraden Werten greifen. tr:has([rowspan]$=2, [rowspan]$=4, [rowspan]$=6, [rowspan]$=8, [rowspan]$=0) ~ tr

Das muss pro Tabelle aber auch öfter als 1x funktionieren.

Das wird heftig …

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

tr:has([rowspan]$=2, [rowspan]$=4, [rowspan]$=6, [rowspan]$=8, [rowspan]$=0) ~ tr

Die eckigen Klammern müssen natürlich nach den Werten zugehen:
tr:has([rowspan$=2], [rowspan$=4], [rowspan$=6], [rowspan$=8], [rowspan$=0]) ~ tr

So eine Schande.

Qapla'

[Gunnar Bittersmann]

@@Jonkins:

nuqneH

Ich möchte, dass bei der Rowspan-Stelle die beiden Reihen die selbe Farbe bekommen

Wirklich? Gehören die beiden (mehreren) Zeilen denn inhaltlich so sehr zusammen, dass dieselbe Farbe gerechtfertigt ist?

Oder wäre es sinnvoll, den Zellen ihre unterschiedlichen Farben zu belassen und die verbundene(n) Zelle(n) so zu färben, dass ihre Zugehörigkeit zu beiden (allen) Zeilen deutlich wird? Mischfarbe, Schraffur oder Gradient von der Farbe der einen Zeile zur Farbe der anderen?

Javascript ist keine Option :/

Warum nicht?

Qapla'