Alternative Tabellenzeilenfarbe mit CSS?

462

Ich verwende hierfür eine Tabelle mit alternativer Zeilenfarbe.

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

<table>
  <tr class="d0">
    <td>One</td>
    <td>one</td>
  </tr>
  <tr class="d1">
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Erweitern Sie das Snippet

Hier benutze ich Klasse für tr, aber ich möchte nur für verwenden table. Wenn ich Klasse für Tabelle verwende, gilt dies tralternativ.

Kann ich mein HTML so mit CSS schreiben?

<table class="alternate_color">
    <tr><td>One</td><td>one</td></tr>
    <tr><td>Two</td><td>two</td></tr>
    </table>

Wie kann ich mithilfe von CSS festlegen, dass die Zeilen "Zebrastreifen" aufweisen?

html css html-table Kali Charan Rajput
quelle

1

Ich habe eine Demo mit allen möglichen Mustern für nth

xengravity

760

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

tbody td{
  padding: 30px;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

Erweitern Sie das Snippet

Es gibt einen CSS-Selektor, eigentlich einen Pseudo-Selektor namens n-tes Kind. In reinem CSS können Sie Folgendes tun:

tr:nth-child(even) {
    background-color: #000000;
}

Hinweis: Keine Unterstützung in IE 8.

Oder wenn Sie jQuery haben:

$(document).ready(function()
{
  $("tr:even").css("background-color", "#000000");
});

Russell Dias
quelle

Ist es möglich, auch die Hyperlinkfarbe alternativer Zeilen zu ändern? Ich möchte eine andere Hyperlinkfarbe für gerade Reihen und eine andere für ungerade. Vielen Dank

ان غني

4

Gute Antwort! Aber nur zur Information gibt es einen anderen CSS-Selektor, der verwendet werden kann, z. tr:nth-of-type(odd/even)

Nikhil Nanjappa

2

@ عثمانغني: Ja, du würdest es einfach tuntr:nth-child(even) a

Gerard

1

Funktioniert nicht, wenn Sie Ihr HTML dynamisch schreiben. Dann müssen Sie den Zeilen Klassen hinzufügen.

Erik

2019: Dies ist nicht mehr die beste Lösung. Verwenden Sie reines CSS .

Chiramisu

158

Sie haben die :nth-child()Pseudoklasse:

table tr:nth-child(odd) td{
    ...
}
table tr:nth-child(even) td{
    ...
}

In den frühen Tagen :nth-child()seines Browsers war die Unterstützung etwas schlecht. Deshalb wurde das Einstellen class="odd"zu einer so verbreiteten Technik. Ende 2013 bin ich froh zu sagen, dass IE6 und IE7 endlich tot sind (oder krank genug, um sich nicht mehr darum zu kümmern), aber IE8 ist immer noch da - zum Glück ist dies die einzige Ausnahme.

Álvaro González
quelle

3

Bevorzugte Antwort, da kein CSS auf den Header angewendet wird

Mike

Hallo, das ist ein paar Jahre zu spät, aber was ist mit dem Hinzufügen einer ausgewählten Klasse mit einer BG-Farbe mit jqeury zur Tabellenzeile, wenn Sie darauf klicken? Ich bemerkte, dass die: n-te Kind-Pseudoklasse bg-color überschreibt, wenn Sie eine "ausgewählte" Klasse mit jqeury

dutchkillsg

@ Dutchkillsg Das scheint eher eine brandneue Frage als ein Kommentar zu meiner Antwort zu sein ...

Álvaro González

Für „Zebrastreifen“ (dh vertikal), nur Austausch tr:nth-child(odd)mit td:nth-of-type(odd). Beachten Sie, dass Sie in diesem Fall eine andere Pseudoklasse auf die Elemente tdanstatt auf die trElemente anwenden .

Chiramisu

36

Fügen <head>Sie einfach Folgendes zu Ihrem HTML-Code hinzu (mit dem ) und Sie sind fertig.

HTML:

<style>
      tr:nth-of-type(odd) {
      background-color:#ccc;
    }
</style>

Einfacher und schneller als jQuery-Beispiele.

bmich72
quelle

Dies sollte die akzeptierte Antwort sein. CSS sollte so weit wie möglich das Styling übernehmen, während Javascript für andere Angelegenheiten verwendet werden kann.

Tormod Haugene

Ich mache nicht täglich HTML. #cccscheint mir kein gültiger Farbcode zu sein. Können Sie erklären? Vielen Dank.

Tommy.carstensen

1

@ tommy.carstensen heißt "hexadezimale Kurzform". Grundsätzlich #cccwird erweitert auf #cccccc, was bedeutet, dass jede RGB-Farbe den Hexadezimalwert ccoder Dezimalwert 204(dh rgb(204, 204, 204)) hat. Lesen Sie hier mehr darüber -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

Nick Grealy

Funktioniert nicht unter Chrome Version 78.0.3904.108

IlludiumPu36

13

Kann ich mein HTML so mit use css schreiben?

Ja, das können Sie, aber dann müssen Sie den :nth-child()Pseudo-Selektor verwenden (der jedoch nur begrenzte Unterstützung bietet):

table.alternate_color tr:nth-child(odd) td{
   /* styles here */
}
table.alternate_color tr:nth-child(even) td{
   /* styles here */
}

Sarfraz
quelle

13

Wir können ungerade und gerade CSS-Regeln und die jQuery-Methode für alternative Zeilenfarben verwenden

Verwenden von CSS

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

Verwenden von jQuery

$(document).ready(function()
{
  $("table tr:odd").css("background", "#ccc");
  $("table tr:even").css("background", "#fff");
});

table tr:nth-child(odd) td{
           background:#ccc;
}
table tr:nth-child(even) td{
            background:#fff;
}

<table>
  <tr>
    <td>One</td>
    <td>one</td>
   </tr>
  <tr>
    <td>Two</td>
    <td>two</td>
  </tr>
</table>

Erweitern Sie das Snippet

Santosh Khalse
quelle

10

Die meisten der oben genannten Codes funktionieren nicht mit der IE-Version. Die Lösung, die für IE + andere Browser funktioniert, ist diese.

   <style type="text/css">
      tr:nth-child(2n) {
             background-color: #FFEBCD;
        }
</style>

Sriwantha Attanayake
quelle

9

<script type="text/javascript">
$(function(){
  $("table.alternate_color tr:even").addClass("d0");
   $("table.alternate_color tr:odd").addClass("d1");
});
</script>

Pranay Rana
quelle

46

OK, ich weiß, dass jQuery auf dieser Site ziemlich allgegenwärtig ist, aber unabhängig davon sollten Sie jQuery nicht ohne Erklärung veröffentlichen. Dieses Skript funktioniert nicht alleine.

DisgruntledGoat

4

Sie können n-te untergeordnete (ungerade / gerade) Selektoren verwenden, jedoch unterstützen nicht alle Browser ( dh 6-8, ff v3.0 ) diese Regeln, weshalb die meisten Lösungen auf eine Form von Javascript / jquery-Lösung zurückgreifen, um die Klassen zu den hinzuzufügen Zeilen für diese nicht kompatiblen Browser, um den Tigerstreifen-Effekt zu erzielen.

rotes Quadrat
quelle

3

Es gibt eine ziemlich einfache Möglichkeit, dies in PHP zu tun. Wenn ich Ihre Abfrage verstehe, gehe ich davon aus, dass Sie in PHP codieren und CSS und Javascript verwenden, um die Ausgabe zu verbessern.

Die dynamische Ausgabe aus der Datenbank enthält eine for-Schleife, um die Ergebnisse zu durchlaufen, die dann in die Tabelle geladen werden. Fügen Sie einfach einen Funktionsaufruf wie folgt hinzu:

echo "<tr style=".getbgc($i).">";  //this calls the function based on the iteration of the for loop.

Fügen Sie dann die Funktion zur Seite oder Bibliotheksdatei hinzu:

function getbgc($trcount)
{

$blue="\"background-color: #EEFAF6;\"";
$green="\"background-color: #D4F7EB;\"";
$odd=$trcount%2;
    if($odd==1){return $blue;}
    else{return $green;}

}}

Dies wechselt nun dynamisch zwischen den Farben in jeder neu generierten Tabellenzeile.

Es ist viel einfacher als mit CSS herumzuspielen, das nicht in allen Browsern funktioniert.

Hoffe das hilft.

Kennzeichen
quelle

danke @mark. Es ist nicht behoben, dass die Site in PHP, .net oder einfachem HTML vorliegt.

Kali Charan Rajput

Alternative Tabellenzeilenfarbe mit CSS?

Antworten: