Çizilmiş önyükleme tablosu: Şerit arka plan rengini nasıl değiştirebilirim?

Bootstrap sınıfıyla table-striped, tablomdaki diğer her satırın arka plan rengine eşittir #F9F9F9. Bu rengi nasıl değiştirebilirim?

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

bootstrap.css'de bu satırı değiştirin veya (2n + 1) yerine (tek) veya (çift) kullanabilirsiniz

Bootstrap'i yükledikten sonra aşağıdaki CSS stilini ekleyin:

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

Bootstrap 3 kullanıyorsanız, Florin'in yöntemini kullanabilir veya özel bir CSS dosyası kullanabilirsiniz.

İşlenmiş css dosyaları yerine Bootstrap daha az kaynak kullanırsanız, doğrudan bootstrap/less/variables.less.

Şuna benzer bir şey bulun:

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

İki seçeneğiniz vardır, ya stilleri özel bir stil sayfasıyla geçersiz kılarsınız ya da ana önyükleme css dosyasını düzenlersiniz. Birincisini tercih ederim.

Özel stilleriniz önyüklemeden sonra bağlanmalıdır.

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

İçinde custom.css

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

Önyükleme CSS'nizi doğrudan önyükleme CSS dosyasını düzenleyerek özelleştirmeyin, bunun yerine, önyükleme CSS'yi kopyalayıp yapıştırmanızı ve bunları farklı bir CSS klasörüne kaydetmenizi öneririm ve orada ihtiyaçlarınıza uygun stilleri özelleştirebilir veya düzenleyebilirsiniz.

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

Çift satırların rengini değiştirmek için 'çift' ve tek satırların rengini değiştirmek için 'tek' kullanın.

Tablo çizgisini sil Satır rengini değiştirme girişimlerinizi geçersiz kılar.

Sonra bunu css'de yapın

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

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

    th {
       background-color: lightseagreen;
    }

Bu dama tahtası desenini (zebra çizgisinin bir alt kümesi olarak) iki sütunlu bir tabloyu göstermenin hoş bir yolu olarak buldum. Bu, LESS CSS kullanılarak yazılır ve tüm renkleri temel renkten anahtarlar.

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

Not düşürdüm .table-stripedama önemli görünmüyor.

Görünüşe göre:

Bootstrap 4 ile sorumlu css yapılandırması bootstrap.cssiçin .table-stripedgeçerli:

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

Çok basit bir çözüm için, onu dosyama kopyaladım custom.cssve değerlerini değiştirdim background-color, böylece şimdi daha güzel bir açık mavi gölgem var:

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

Renkleri gerçekten tersine çevirmek istiyorsanız, "tek" satırları beyaz yapan ve "çift" satırları istediğiniz rengi yapan bir kural eklemelisiniz.

Şerit sırasını değiştirmenin en kolay yolu:

Tablo tr etiketlerinizden önce boş ekleyin tr.