ストライプブートストラップテーブル：ストライプの背景色を変更するにはどうすればよいですか？

Bootstrapクラスを使用table-stripedすると、テーブルの1行おきに背景色がに等しくなり#F9F9F9ます。この色を変更するにはどうすればよいですか？

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

bootstrap.cssでこの行を変更するか、（2n + 1）の代わりに（奇数）または（偶数）を使用できます

Bootstrapを読み込んだ後、次のCSSスタイルを追加します。

.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を使用している場合は、Florinの方法を使用するか、カスタムCSSファイルを使用できます。

処理されたcssファイルの代わりにBootstrapの少ないソースを使用する場合は、で直接変更できますbootstrap/less/variables.less。

次のようなものを見つけます：

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

カスタムスタイルシートでスタイルを上書きするか、メインブートストラップcssファイルを編集するかの2つのオプションがあります。前者の方が好きです。

カスタムスタイルは、ブートストラップ後にリンクする必要があります。

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

に custom.css

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

ブートストラップCSSファイルを直接編集してブートストラップCSSをカスタマイズしないでください。代わりに、ブートストラップCSSをコピーして別のCSSフォルダーに保存することをお勧めします。そこで、ニーズに合わせてスタイルをカスタマイズまたは編集できます。

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

偶数行の色を変更するには「偶数」を使用し、奇数行の色を変更するには「奇数」を使用します。

テーブルの縞模様を削除する行の色を変更しようとする試みを上書きします。

次に、CSSでこれを行います

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

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

    th {
       background-color: lightseagreen;
    }

このチェッカーボードパターン（ゼブラストライプのサブセットとして）は、2列のテーブルを表示する快適な方法であることがわかりました。これはLESS CSSを使用して記述され、ベースカラーからすべてのカラーをキーイングします。

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

注：を削除しましたが、.table-striped重要ではないようです。

次のようになります。

Bootstrap 4では、bootstrap.cssforの責任があるcss設定.table-stripedは次のとおりです。

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

非常に単純なソリューションcustom.cssの場合はbackground-color、それをファイルにコピーしての値を変更しただけです。これで、より明るい水色のシェードができました。

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

実際に色を反転したい場合は、「奇数」行を白にして、「偶数」行を好きな色にするルールを追加する必要があります。

ストライプの順序を変更する最も簡単な方法：

テーブルのtrタグの前に空を 追加しtrます。