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

124

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

css twitter-bootstrap html-table

— drake035
sumber

116

.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)

— Florin
sumber

100

Jangan lakukan ini. Lain kali Anda meningkatkan bootstrap, Anda akan kehilangan custom override. Lebih baik memiliki custom css dalam file terpisah yang Anda tempatkan langsung setelah bootstrap.css di head.

— Ben Thurley

Bagaimana Anda akan mengubah warna latar belakang untuk mengarahkan seluruh baris di sini?

— Barry Michael Doyle

2

halaman ini menjelaskan bagaimana melakukannya untuk hover [ stackoverflow.com/questions/15643037/…

— Yvon Huynh

4

Ini adalah jawaban yang saya butuhkan, namun, saya menambahkannya ke file CSS terpisah, bukan CSS Bootstrap yang sebenarnya. Ini berjenjang jadi jika saya menambahkannya setelah bootstrap dan itu berfungsi dengan baik dan membuatnya keluar dari bootstrap utama. Selain itu, saya tidak perlu membawa bootstrap saya sendiri yang dimodifikasi, tetapi saya hanya menambahkan css saya ke setiap proyek yang membutuhkan ini.

— raddevus

Jangan pernah mengubah pustaka pihak ketiga secara langsung. Tidak pernah! Timpa saja gaya di file css Anda sendiri.

— Mehrdad

133

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
 }

— kyriakos.dll
sumber

bekerja dengan baik saat menimpa warna tabel bootstrap default. Terima kasih.

— eucca

Ini menonaktifkan kelas "table-hover" pada baris genap ... apakah ada perbaikan?

— exSnake

14

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;

— Lucas S.
sumber

11

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;
}

— Eisa Adil
sumber

Tidak berhasil untuk saya. Jawaban oleh kyriakos bekerja dengan sangat baik.

— varagrawal

Contoh ini tidak memiliki tag tbody

— kenecaswell

itu> berarti anak langsung, jadi jika ada tag tbody antara tabel dan tr, itu tidak akan berfungsi. tapi hapus saja>, dan itu akan berlaku untuk semua tr di bawah tabel yang ditentukan, tidak peduli apakah mereka anak langsung atau bukan.

— jumps4fun

3

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.

3

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

— sammani anuththara
sumber

Ini menonaktifkan kelas table-hover dari bootstrap, apakah ada cara untuk menggunakan keduanya?

— exSnake

3

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;
    }

— David Morrow
sumber

2

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: masukkan deskripsi gambar di sini

— John Lehmann
sumber

2

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);
}

— Anna Costalonga
sumber

0

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.

— PhPGuy
sumber

0

Cara termudah untuk mengubah susunan belang:

Tambahkan kosong tr sebelum tag tr tabel Anda.

— Royal_MGH
sumber