Warna baris tabel alternatif menggunakan CSS?

462

Saya menggunakan tabel dengan warna baris alternatif dengan ini.

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>

Luaskan cuplikan

Di sini saya menggunakan kelas untuk tr, tetapi saya ingin menggunakan hanya untuk table. Ketika saya menggunakan class untuk tabel daripada ini berlaku pada tralternatif.

Bisakah saya menulis HTML saya seperti ini menggunakan CSS?

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

Bagaimana saya bisa membuat baris memiliki "zebra stripes" menggunakan CSS?

html css html-table

— Kali Charan Rajput
sumber

1

Saya telah membuat demo menggunakan semua pola yang mungkin untuk 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>

Luaskan cuplikan

Ada pemilih CSS, benar-benar pemilih semu, disebut nth-child. Dalam CSS murni Anda dapat melakukan hal berikut:

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

Catatan: Tidak ada dukungan di IE 8.

Atau, jika Anda memiliki jQuery:

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

— Russell Dias
sumber

apakah mungkin juga mengubah warna hyperlink dari baris alternatif. Saya ingin warna hyperlink yang berbeda untuk baris genap dan yang lain untuk ganjil. Terima kasih

— عثمان غني

4

Jawaban bagus! Tetapi hanya untuk informasi ada pemilih CSS lain yang dapat digunakan yaitu. tr:nth-of-type(odd/even)

— Nikhil Nanjappa

2

@ عثمانغني: Ya, lakukan sajatr:nth-child(even) a

— Gerard

1

Tidak berfungsi jika Anda menulis html Anda secara dinamis. Maka Anda perlu menambahkan kelas ke baris.

— erik

Pada 2019: Ini bukan lagi solusi terbaik. Gunakan CSS murni .

— Chiramisu

158

Anda memiliki :nth-child()pseudo-class:

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

Pada hari-hari awal :nth-child()yang mendukung browser agak miskin. Itu sebabnya pengaturan class="odd"menjadi teknik yang umum. Pada akhir 2013 saya senang mengatakan bahwa IE6 dan IE7 akhirnya mati (atau cukup sakit untuk berhenti merawat) tetapi IE8 masih ada - untungnya, itu satu-satunya pengecualian.

— Álvaro González
sumber

3

Jawaban yang disukai karena tidak menerapkan CSS ke header

— Mike

Hai ini sudah terlambat beberapa tahun tetapi bagaimana dengan menambahkan kelas yang dipilih dengan warna bg dengan jqeury ke baris tabel ketika diklik. Saya perhatikan bahwa: nth-child pseudo class bg-color menimpa ketika Anda menambahkan kelas "terpilih" dengan jqeury

— dutchkillsg

@dutchkillsg Itu tampaknya menjadi pertanyaan baru daripada komentar untuk jawaban saya ...

— vlvaro González

Untuk "garis zebra" (yaitu vertikal), cukup tukar tr:nth-child(odd)dengan td:nth-of-type(odd). Perhatikan bahwa dalam hal ini Anda menerapkan kelas pseudo yang berbeda ke elemen tddaripada trelemen.

— Chiramisu

36

Cukup tambahkan berikut ini ke kode html Anda (withing <head>) dan Anda selesai.

HTML:

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

Lebih mudah dan lebih cepat daripada contoh jQuery.

— bmich72
sumber

Ini harus menjadi jawaban yang diterima. Sejauh mungkin, CSS harus menangani gaya, sedangkan javascript dapat digunakan untuk menangani masalah lain.

— Tormod Haugene

Saya tidak melakukan html setiap hari. #ccctidak tampak seperti kode warna yang valid untuk saya. Bisakah Anda jelaskan? Terima kasih.

— tommy.carstensen

1

@ tommy.carstensen itu disebut "bentuk hexadecimal steno". Pada dasarnya #cccakan diperluas ke #cccccc, yang berarti bahwa setiap warna RGB memiliki nilai heksadesimal cc, atau nilai desimal 204(yaitu rgb(204, 204, 204)). Baca lebih lanjut di sini -> en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

— Nick Grealy

Tidak berfungsi di Versi Chrome 78.0.3904.108

— IlludiumPu36

13

dapatkah saya menulis html saya seperti ini dengan menggunakan css?

Ya, Anda bisa tetapi kemudian Anda harus menggunakan :nth-child()pemilih semu (yang memiliki dukungan terbatas):

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

— Sarfraz
sumber

13

Kita dapat menggunakan aturan CSS aneh dan genap dan metode jQuery untuk warna baris alternatif

Menggunakan CSS

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

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

Luaskan cuplikan

— Santosh Khalse
sumber

10

Sebagian besar kode di atas tidak akan berfungsi dengan versi IE. Solusi yang berfungsi untuk IE + browser lain adalah ini.

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

— Sriwantha Attanayake
sumber

9

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

— Pranay Rana
sumber

46

OK saya tahu jQuery cukup ada di mana-mana di situs ini, tetapi terlepas dari itu Anda tidak boleh memposting jQuery tanpa penjelasan. Script ini tidak akan bekerja sendiri.

— DisgruntledGoat

4

Anda dapat menggunakan pemilih n-child (odd / even) namun tidak semua browser ( yaitu 6-8, ff v3.0 ) mendukung aturan ini maka mengapa sebagian besar solusi kembali ke beberapa bentuk solusi javascript / jquery untuk menambahkan kelas ke baris untuk browser yang tidak patuh ini untuk mendapatkan efek garis harimau.

— kotak merah
sumber

3

Ada cara yang cukup mudah untuk melakukan ini di PHP, jika saya mengerti permintaan Anda, saya berasumsi bahwa Anda kode dalam PHP dan Anda menggunakan CSS dan javascript untuk meningkatkan output.

Output dinamis dari database akan membawa for loop untuk beralih melalui hasil yang kemudian dimuat ke dalam tabel. Cukup tambahkan pemanggilan fungsi seperti ini:

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

kemudian tambahkan fungsi ke halaman atau file perpustakaan:

function getbgc($trcount)
{

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

}

Sekarang ini akan berganti secara dinamis antara warna di setiap baris tabel yang baru dibuat.

Ini jauh lebih mudah daripada mengacaukan dengan CSS yang tidak berfungsi di semua browser.

Semoga ini membantu.

— menandai
sumber

terima kasih @mark. Itu tidak memperbaiki situs itu akan dalam PHP, .net atau HTML sederhana.

— Kali Charan Rajput