Alternatywny kolor wiersza tabeli za pomocą CSS?

462

Używam do tego tabeli o innym kolorze wiersza.

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>

Rozwiń fragment kodu

Tutaj używam klasy do tr, ale chcę używać tylko do table. Kiedy używam klasy do tabeli, to dotyczy to tralternatywy.

Czy mogę napisać mój HTML w ten sposób za pomocą CSS?

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

Jak sprawić, by rzędy miały „paski zebry” za pomocą CSS?

html css html-table

— Kali Charan Rajput
źródło

1

Stworzyłem demo, używając wszystkich możliwych wzorów dla nth-child () - xengravity.com/demo/nth-child

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

Rozwiń fragment kodu

Istnieje selektor CSS, tak naprawdę pseudo-selektor, zwany nth-child. W czystym CSS możesz wykonać następujące czynności:

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

Uwaga: Brak obsługi w IE 8.

Lub, jeśli masz jQuery:

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

— Russell Dias
źródło

czy można również zmienić kolor hiperłącza alternatywnych wierszy. Chcę inny kolor hiperłącza dla parzystego wiersza i inny dla nieparzystego. Dzięki

— عثمان غني

4

Świetna odpowiedź! Ale tylko dla informacji istnieje inny selektor CSS, którego można użyć, tj. tr:nth-of-type(odd/even)

— Nikhil Nanjappa

2

@ عثمانغني: Tak, po prostu byś to zrobiłtr:nth-child(even) a

— Gerard

1

Nie działa, jeśli dynamicznie piszesz HTML. Następnie musisz dodać klasy do wierszy.

— erik

W 2019 r .: nie jest to już najlepsze rozwiązanie. Używaj czystego CSS .

— Chiramisu,

158

Masz :nth-child()pseudoklasę:

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

W pierwszych dniach :nth-child()swojego poparcia przeglądarki niby biedny. Dlatego ustawienie class="odd"stało się tak powszechną techniką. Pod koniec 2013 roku z przyjemnością stwierdzam, że IE6 i IE7 są w końcu martwe (lub wystarczająco chore, aby przestać się nimi przejmować), ale IE8 wciąż istnieje - na szczęście jest to jedyny wyjątek.

— Álvaro González
źródło

3

Preferowana odpowiedź, ponieważ nie dotyczy CSS nagłówka

— Mike

Cześć, spóźnia się o kilka lat, ale co z dodaniem wybranej klasy z kolorem bg z jqeury do wiersza tabeli po kliknięciu. Zauważyłem, że kolor pseudoklasy n-child bg-kolor nadpisuje się, gdy dodajesz „wybraną” klasę z jqeury

— dutchkillsg

@dutchkillsg To wydaje się być zupełnie nowe pytanie niż komentarz do mojej odpowiedzi ...

— Álvaro González

W przypadku „pasków zebry” (tzn. Pionowych) po prostu wymień tr:nth-child(odd)z td:nth-of-type(odd). Zauważ, że w tym przypadku stosujesz inną pseudoklasę tdzamiast trelementów.

— Chiramisu,

36

Po prostu dodaj następujące elementy do kodu HTML (za pomocą <head>) i gotowe.

HTML:

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

Łatwiejsze i szybsze niż przykłady jQuery.

— bmich72
źródło

To powinna być zaakceptowana odpowiedź. W miarę możliwości CSS powinien obsługiwać stylizację, a javascript może służyć do obsługi innych spraw.

— Tormod Haugene,

Nie robię html na codzień. #cccnie wydaje mi się prawidłowym kodem koloru. Możesz wytłumaczyć? Dzięki.

— tommy.carstensen

1

@ tommy.carstensen nazywa się to „skrótem szesnastkowym”. Zasadniczo #ccczostaje rozwinięty do #cccccc, co oznacza, że każdy kolor RGB ma wartość szesnastkową cclub dziesiętną 204(tj rgb(204, 204, 204).). Przeczytaj więcej na ten temat tutaj -> pl.wikipedia.org/wiki/Web_colours#Shorthand_hexadecimal_form

— Nick Grealy

Nie działa w wersji Chrome 78.0.3904.108

— IlludiumPu36

13

czy mogę napisać mój HTML tak za pomocą CSS?

Tak, ale będziesz musiał użyć :nth-child()pseudo selektora (który ma ograniczoną obsługę):

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

— Sarfraz
źródło

13

Możemy stosować nieparzyste, a nawet parzyste reguły CSS i metodę jQuery dla alternatywnych kolorów wierszy

Korzystanie z CSS

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

Korzystanie z 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>

Rozwiń fragment kodu

— Santosh Khalse
źródło

10

Większość powyższych kodów nie będzie działać z wersją IE. Oto rozwiązanie, które działa dla innych przeglądarek IE +.

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

— Sriwantha Attanayake
źródło

9

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

— Pranay Rana
źródło

46

OK Wiem, że jQuery jest dość wszechobecny na tej stronie, ale niezależnie od tego nie powinieneś publikować jQuery bez wyjaśnienia. Ten skrypt nie działa samodzielnie.

— DisgruntledGoat

4

Możesz używać selektorów n-potomnych (nieparzystych / parzystych), jednak nie wszystkie przeglądarki ( tj. 6-8, ff v3.0 ) obsługują te reguły, dlatego większość rozwiązań odwołuje się do jakiejś formy rozwiązania javascript / jquery w celu dodania klas do wiersze dla tych niezgodnych przeglądarek, aby uzyskać efekt paska tygrysa.

— plac Czerwony
źródło

3

Jest to dość łatwy sposób, aby to zrobić w PHP, jeśli rozumiem twoje zapytanie, zakładam, że kodujesz w PHP i używasz CSS i javascript do zwiększenia wydajności.

Dynamiczne wyjście z bazy danych będzie zawierało pętlę for, aby iterować wyniki, które następnie są ładowane do tabeli. Po prostu dodaj wywołanie funkcji do następującego:

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

następnie dodaj funkcję do pliku strony lub biblioteki:

function getbgc($trcount)
{

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

}

Teraz będzie to dynamicznie zmieniać na przemian kolory w każdym nowo wygenerowanym wierszu tabeli.

Jest to o wiele łatwiejsze niż bałagan w CSS, który nie działa we wszystkich przeglądarkach.

Mam nadzieję że to pomoże.

— znak
źródło

dzięki @mark. Nie jest ustalone, że strona będzie w języku PHP, .net lub zwykłym HTML.

— Kali Charan Rajput