Tabel bootstrap bergaris: Bagaimana cara mengubah warna latar belakang bergaris?

Dengan kelas Bootstrap table-striped, setiap baris lain di tabel saya memiliki warna latar belakang yang sama dengan #F9F9F9. Bagaimana cara mengubah warna ini?

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: red;
}

ubah baris ini di bootstrap.css atau Anda dapat menggunakan (ganjil) atau (genap) daripada (2n + 1)

Tambahkan gaya CSS berikut setelah memuat Bootstrap:

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

Jika Anda menggunakan Bootstrap 3, Anda dapat menggunakan metode Florin, atau menggunakan file CSS khusus.

Jika Anda menggunakan sumber Bootstrap lebih sedikit daripada file css yang diproses, Anda dapat langsung mengubahnya bootstrap/less/variables.less.

Temukan sesuatu seperti:

//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

Anda memiliki dua opsi, Anda dapat mengganti gaya dengan lembar gaya khusus, atau Anda mengedit file css bootstrap utama. Saya lebih suka yang pertama.

Gaya kustom Anda harus ditautkan setelah bootstrap.

<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">

Di custom.css

.table-striped>tr:nth-child(odd){
   background-color:red;
}

Jangan sesuaikan CSS bootstrap Anda dengan langsung mengedit file CSS bootstrap. Sebagai gantinya, saya sarankan untuk menyalin dan menempelkan CSS bootstrap dan menyimpannya di folder CSS yang berbeda dan di sana Anda dapat menyesuaikan atau mengedit gaya yang sesuai dengan kebutuhan Anda.

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #e08283;
  color: white;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
  background-color: #ECEFF1;
  color: white;
}

Gunakan 'genap' untuk mengubah warna baris genap dan gunakan 'ganjil' untuk mengubah warna baris ganjil.

Hapus garis-tabel Ini menimpa upaya Anda untuk mengubah warna baris.

Kemudian lakukan ini di css

   tr:nth-child(odd) {
    background-color: lightskyblue;
    }

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

    th {
       background-color: lightseagreen;
    }

Saya menemukan pola papan catur ini (sebagai bagian dari garis zebra) sebagai cara yang menyenangkan untuk menampilkan tabel dua kolom. Ini ditulis menggunakan LESS CSS, dan kunci semua warna dari warna dasar.

@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);    
@other-row: darken(@row-color, 10%);

tbody {
    td:nth-child(odd) { width: 45%; }
    tr:nth-child(odd) > td:nth-child(odd) {
        background: darken(@row-color, 0%); }
    tr:nth-child(odd) > td:nth-child(even) {
        background: darken(@row-color, 7%); }
    tr:nth-child(even) > td:nth-child(odd) {
        background: darken(@other-row, 0%); }
    tr:nth-child(even) > td:nth-child(even) {
        background: darken(@other-row, 7%); }
}

Catatan Saya telah menjatuhkan .table-striped, tapi sepertinya tidak masalah.

Seperti:

Dengan Bootstrap 4, konfigurasi css bertanggung jawab dalam bootstrap.cssuntuk .table-stripedadalah:

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

Untuk solusi yang sangat sederhana, saya hanya menyalinnya ke dalam custom.cssfile saya , dan mengubah nilainya background-color, sehingga sekarang saya memiliki warna biru muda yang lebih bagus:

.table-striped tbody tr:nth-of-type(odd) {
  background-color:  rgba(72, 113, 248, 0.068);
}

Jika Anda ingin membalikkan warna, Anda harus menambahkan aturan yang membuat baris "ganjil" menjadi putih serta membuat baris "genap" dengan warna apa pun yang Anda inginkan.

Cara termudah untuk mengubah susunan belang:

Tambahkan kosong tr sebelum tag tr tabel Anda.