web-dev-qa-db-ja.com

ブートストラップテーブルのストライプ：ストライプの背景色を変更する方法

ブートストラップクラスtable-stripedでは、私のテーブルの他のすべての行は#F9F9F9と等しい背景色になります。どうやってこの色を変えることができますか？

csstwitter-bootstraphtml-table
105
drake035
.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）の代わりに（奇数）または（偶数）を使用できます。

101
Florin

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
 }
123
kyriakos

カスタムスタイルシートでスタイルを上書きするか、メインのブートストラップ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;
}
11
Eisa Adil

Bootstrap 3を使用している場合は、Florinの方法を使用することも、カスタムCSSファイルを使用することもできます。

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

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

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

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を削除しましたが、重要ではないようです。

ように見えます： enter image description here

2
John Lehmann

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

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

偶数行の色を変更するには 'even'を使用し、奇数行の色を変更するには 'odd'を使用します。

0
sammani anuththara

実際に色を反転させたい場合は、「奇数」行を白にし、「偶数」行を任意の色にするという規則を追加する必要があります。

0
PhPGuy