Alternative Tabellenzeilenfarbe mit CSS?

Question

Alternative Tabellenzeilenfarbe mit CSS?

Gefragt el 21 de Juni, 2010: Wann wurde die Frage gestellt
750746 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich verwende eine Tabelle mit abwechselnder Zeilenfarbe mit diesem.

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>

Hier verwende ich die Klasse für tr aber ich möchte sie nur für table . Wenn ich die Klasse für die Tabelle verwende, gilt dies für tr alternativ.

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 die Zeilen mit CSS in "Zebrastreifen" verwandeln?

Gefragt el 21 de Juni, 2010 von Kali Charan Rajput

Answer 1

5 Antworten

Answer 2

10voto

Sriwantha Attanayake Punkte 7288

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

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

Beantwortet el 23 de April, 2014 von Sriwantha Attanayake (7288 Punkte )

Answer 3

9voto

Pranay Rana Punkte 170480

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

Beantwortet el 21 de Juni, 2010 von Pranay Rana (170480 Punkte )

Answer 4

4voto

redsquare Punkte 76970

Sie können nth-child(odd/even)-Selektoren verwenden, aber nicht alle Browser ( dh 6-8, ff v3.0 ) unterstützen diese Regeln, weshalb die meisten Lösungen auf irgendeine Form von Javascript/Jquery-Lösung zurückgreifen, um die Klassen zu den Zeilen für diese nicht konformen Browser hinzuzufügen, um den Tigerstripe-Effekt zu erzielen.

Beantwortet el 21 de Juni, 2010 von redsquare (76970 Punkte )

Answer 5

3voto

mark Punkte 31

Es gibt eine ziemlich einfache Möglichkeit, dies in PHP zu tun, wenn ich Ihre Anfrage verstehe, nehme ich an, dass Sie in PHP programmieren und Sie CSS und Javascript verwenden, um die Ausgabe zu verbessern.

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

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

und fügen Sie die Funktion in die Seite oder die Bibliotheksdatei ein:

function getbgc($trcount)
{

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

}

Nun wird bei jeder neu erzeugten Tabellenzeile dynamisch zwischen den Farben gewechselt.

Das ist viel einfacher, als sich mit CSS herumzuschlagen, das nicht in allen Browsern funktioniert.

Ich hoffe, das hilft.

Beantwortet el 13 de Marsch, 2013 von mark (31 Punkte )

Answer 6

0voto

Mori Punkte 901

Bitte versuchen Sie es auf diese Weise: Sie können in Html Datei für WebView

<head>

    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: Lightgreen;
        }
    </style>
</head>

Beantwortet el 22 de April, 2021 von Mori (901 Punkte )

Alternative Tabellenzeilenfarbe mit CSS?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Alternative Tabellenzeilenfarbe mit CSS?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: