CSS Alternate Rows – einige Zeilen ausgeblendet

Ich versuche, eine Tabelle so zu gestalten, dass jede Zeile eine andere Farbe hat (ungerade/gerade). Ich habe folgendes CSS:

#woo tr:nth-child(even) td {
    background-color: #f0f9ff;
}

#woo tr:nth-child(odd) td {
    background-color: white;
}

Einige meiner Zeilen können jedoch ausgeblendet werden, und ich möchte immer noch, dass sich die Zeilen abwechseln. Wie kann ich das Obige so anpassen, dass es den Eindruck von abwechselnden Zeilen ergibt, auch wenn die Zeilen, die nebeneinander liegen, nicht unbedingt ungerade und gerade sind?

Wenn Sie jQuery verwenden, können Sie beispielsweise eine seiner Funktionen verwenden .filter(), um nur die sichtbaren Elemente auszuwählen. Aber der Schlüssel hier ist ein CSS-Selektor :visible.

Zum Beispiel (vgl jsfiddle):

jQuery('tr:visible:odd').css({'background-color': 'red'});
jQuery('tr:visible:even').css({'background-color': 'yellow'});

Da das “Missing-Stripe-Phänomen” nur dann auftritt, wenn ein seltsam Anzahl der Zeilen ausgeblendet ist, könnten Sie mit dem Hinzufügen einer einzigen unsichtbaren Zeile davonkommen Polsterreihe überall dort, wo eine ungerade Anzahl von Zeilen ausgeblendet ist.

Row 1
Row 2
Row 3 (hidden)
Padding (hidden)
Row 4
Row 5

Ob dies tatsächlich eine gute Lösung ist, hängt stark von Ihrem aktuellen Code ab, zB wie Sie die Tabelle erstellen und wie Zeilen ausgeblendet werden.

Aber wenn Ihre Tabellen riesig sind und große Teile aufeinanderfolgender Zeilen ausgeblendet sind, würde dies viel besser funktionieren als eine Javascript/jQuery-Lösung.

Ich habe dieses Problem gelöst, indem ich ein Hintergrundbild für die Tabelle verwendet habe, das aus den beiden alternativen Farben bestand. Dies ist keine vollständige CSS-Lösung, da ein Bild erstellt werden muss, aber es sollte sehr gut für Tabellen mit Tausenden von Einträgen skaliert werden.

Das Hintergrundbild in der base64-Codierung unten ist ein 1×50-Bild mit den oberen 25 Pixeln in einer Farbe und den unteren 25 Pixeln in der alternativen Farbe.

table {
  border-collapse: collapse;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAIAAAASmSbdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbATAssXhCIwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAYSURBVAjXY/j8/joTAwMDTfGXDzdpbQcATuQF2Ze0VigAAAAASUVORK5CYII=);
}
  
td {
   padding: 2px 4px;
   height: 21px;
}

<table>
    <tbody>
        <tr style="display: table-row;">
            <td>ANIMAL!!</td>
        </tr>
        <tr style="display: table-row;">
            <td>Beaker</td>
        </tr>
        <tr style="display: none;">
            <td>Bunsen Honeydew, Ph.D.</td>
        </tr>
        <tr style="display: table-row;">
            <td>Camilla the Chicken</td>
        </tr>
        <tr style="display: table-row;">
            <td>Dr. Julius Strangepork</td>
        </tr>
        <tr style="display: none;">
            <td>Dr. Teeth</td>
        </tr>
        <tr style="display: none;">
            <td>Floyd Pepper</td>
        </tr>
        <tr style="display: none;">
            <td>Gonzo</td>
        </tr>
        <tr style="display: table-row;">
            <td>Janice</td>
        </tr>
        <tr style="display: none;">
            <td>Miss Piggy</td>
        </tr>
        <tr style="display: none;">
            <td>Rizzo</td>
        </tr>
        <tr style="display: none;">
            <td>Robin the Frog</td>
        </tr>
        <tr style="display: table-row;">
            <td>Sam the Eagle</td>
        </tr>
        <tr style="display: table-row;">
            <td>Statler</td>
        </tr>
        <tr style="display: none;">
            <td>The Swedish Chef</td>
        </tr>
        <tr style="display: table-row;">
            <td>Waldorf</td>
        </tr>
        <tr style="display: none;">
            <td>Zoot</td>
        </tr>
    </tbody>
</table>

Mir ist klar, dass dies sehr spät ist, aber ich bin heute auf dasselbe Problem gestoßen und habe eine reine CSS-Lösung mit einer entwickelt nth-child Formel. Ich weiß nicht, ob es genau zu Ihrem Szenario passt, aber wenn jede zweite Zeile ausgeblendet ist, Sie aber trotzdem die sichtbaren Zeilen wechselnde Farben haben müssen, funktioniert dies hervorragend. Der CSS-Selektor sieht folgendermaßen aus:

tr:nth-child(4n - 1) { background-color: grey; }

Hier ist eine Geige zeigt es in Aktion.

Das macht jede zweite sichtbare Zeile grau. Weitere Informationen zur Funktionsweise dieser Formeln finden Sie unter Dies ist eine großartige Anleitung.

Dies ist ein schwieriges Problem, ich habe gerade eine Weile mit CSS2- und 3-Selektoren gespielt, und ich bin mir nicht sicher, ob wir schon so weit sind. So etwas sollte möglich sein, funktioniert aber nicht:

tr td {background-color:white;}
tr td:not([style="display:none"]):nth-of-type(even) {
    background-color:#f0f9ff;
}

<tr><td>1</td></tr>
<tr><td style="display:none">2</td></tr>
<tr><td>3</td></tr>

Scheint, dass Sie mit jQuery feststecken :visible Erweiterung (kein natives CSS), aber wenn es langsam läuft, paginieren Sie die Zeilen auf jeden Fall, wie @Ionut sagt.

Diese Frage mag alt sein, aber als ich nach einer Lösung für dieses Problem suchte, kam ich hierher und inspiriert von Jeff Seiferts Antwort verwendete ich ein Hintergrundbild mit sich wiederholendem linearem Farbverlauf, um eine rein CSS-basierte Lösung zu erhalten:

tbody {
    background-image: repeating-linear-gradient(grey 0 2em, white 2em 4em);
}
tr {
    height: 2em;
}

Der einzige Nachteil ist, dass Sie eine Höhe für die Tabellenzeile angeben müssen (und denselben Wert in die Gradientendefinition eingeben müssen).

BEARBEITEN: Dies funktioniert nur, wenn alle Zeilen die gleiche Höhe haben. Leider funktioniert max-height nicht für Tabellenzeilen. Dafür habe ich zwei unausgegorene Lösungen:

1. Verhindern Sie, dass Text umbrochen wird, indem Sie anwenden tr{white-space: nowrap;} – Auf Nicht-Text-Elemente muss weiterhin geachtet werden, Überlauf könnte ebenfalls ein Problem werden

2. Wickeln Sie die <tr> Inhalt mit einem anderen Element wie a <div> und bewerben div{max-height:2em;} – Dies erfordert Änderungen im HTML und erfordert auch eine Behandlung des Überlaufs