Kann der CSS-Stil Tabellenzeilen abwechseln, ohne Klassenattribute in jeder Zeile zu verwenden?

CSS verwenden, um Tabellenzeilenfarben abzuwechseln

Wenn es um das Gestalten von Tabellen geht, ist das Erstellen alternativer Zeilenfarben eine häufige Aufgabe. Traditionell ist die Verwendung von Klassenattributen für Tabellenzeilen (TR) ein beliebter Ansatz, wie das folgende Beispiel zeigt:

tr.d0 td {
  background-color: #CC9999;
  color: black;
}
tr.d1 td {
  background-color: #9999CC;
  color: black;
}

Diese Methode kann jedoch beim Umgang mit größeren Tabellen mühsam werden. Können wir also CSS verwenden, um alternative Zeilen ohne Klassenattribute zu formatieren?

Styling mit einer Tabellenklasse

Die Antwort lautet „Ja“. Durch die Verwendung eines Klassenattributs für die Tabelle selbst (table.alternate_color) können wir das gleiche Ergebnis erzielen wie durch die Verwendung von Klassenattributen für jede Zeile:

table.alternate_color tbody tr:nth-child(odd) {
  background-color: #CC9999;
  color: black;
}
table.alternate_color tbody tr:nth-child(even) {
  background-color: #9999CC;
  color: black;
}

Diese Methode bietet Flexibilität, sodass Sie den Stil von einfach ändern können sowohl ungerade als auch gerade Zeilen.

Verwendung von jQuery

Ein anderer Ansatz besteht darin, jQuery zu verwenden, um die Zeilen der Tabelle zu manipulieren. Diese Lösung eignet sich, wenn Sie mehr Kontrolle über den Rendering-Prozess wünschen:

$(document).ready(function() {
  $("tr:odd").css({
    "background-color": "#000",
    "color": "#fff"
  });
});

Alternative Zeilenfarbe mit CSS nth-child

Zusätzlich können Sie den CSS nth-child-Selektor zur Angabe verwenden das Styling für alternative Zeilen:

tbody tr:nth-child(odd) {
  background-color: #4C8BF5;
  color: #fff;
}

Durch die Verwendung dieser Techniken können Sie dynamische und optisch ansprechende Tabellen mit alternativen Zeilenfarben erstellen CSS.

Das obige ist der detaillierte Inhalt vonKann der CSS-Stil Tabellenzeilen abwechseln, ohne Klassenattribute in jeder Zeile zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!