Alternative Tabellenzeilenfarbe mit CSS?

Question

Alternative Tabellenzeilenfarbe mit CSS?

Gefragt el 21 de Juni, 2010: Wann wurde die Frage gestellt
750745 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

832voto

Russell Dias Punkte 67456

$(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>

Es gibt einen CSS-Selektor, eigentlich ein Pseudoselektor, namens nth-child. In reinem CSS können Sie Folgendes tun:

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

Nota: Keine Unterstützung im IE 8.

Oder, wenn Sie jQuery haben:

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

Beantwortet el 21 de Juni, 2010 von Russell Dias (67456 Punkte )

Answer 3

246voto

Álvaro González Punkte 134708

Sie haben die :nth-child() Pseudo-Klasse:

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

In den ersten Tagen der :nth-child() seine Browserunterstützung war ziemlich schlecht. Deshalb ist die Einstellung class="odd" eine so gängige Technik wurde. Ende 2013 bin ich froh, sagen zu können, dass IE6 und IE7 endlich tot sind (oder krank genug, um sich nicht mehr darum zu kümmern), aber IE8 gibt es immer noch - zum Glück ist er die einzige Ausnahme.

Beantwortet el 21 de Juni, 2010 von Álvaro González (134708 Punkte )

Answer 4

55voto

bmich72 Punkte 610

Fügen Sie einfach den folgenden Text in Ihren HTML-Code ein (innerhalb der <head> ) und Sie sind fertig.

HTML:

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

Einfacher und schneller als jQuery-Beispiele.

Beantwortet el 21 de Marsch, 2014 von bmich72 (610 Punkte )

Answer 5

15voto

Santosh Khalse Punkte 10598

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

Verwendung von CSS

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

Verwendung 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>

Beantwortet el 17 de Januar, 2017 von Santosh Khalse (10598 Punkte )

Answer 6

14voto

Sarfraz Punkte 366217

Kann ich mein html so schreiben, dass ich css?

Ja, das können Sie, aber dann müssen Sie die :nth-child() Pseudoselektor (der allerdings nur begrenzt unterstützt wird):

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

Beantwortet el 21 de Juni, 2010 von Sarfraz (366217 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: