バックグラウンドカラーをブートストラップテーブルの行に変更するにはどうすればよいですか（崩壊したテーブルを使用して）

私のアプリでbootstrapを使用していて、table-stripedテーブルにさまざまな背景色を使用したいとします。これは私のコードです：バックグラウンドカラーをブートストラップテーブルの行に変更するにはどうすればよいですか（崩壊したテーブルを使用して）

は

<table class="table table-striped"> 

    <% @casinos.take(10).each_with_index do |casino, index| %> 
    <tr class="casino-row"> 
     <td class="index-number"><%= index + 1 %></td> 
     <td class="casino-logo"><%= link_to image_tag(casino.logo), casino %></td> 
     <td class="bonus-info"><%= casino.bonus_info %></td> 
     <td> 
     <ul class="rating"> 
      <% form_id = "casino_#{casino.id}_rating" %> 
      <%= form_for casino.ratings.build, html: 
       { id: "casino_#{casino.id}_rating", class: 'star_rating_form' } do |f| %> 
      <%= f.hidden_field :casino_id %> 
      <%= f.hidden_field :score, id: "#{form_id}_stars", class: 'star-value' %> 
      <% end %> 

     </ul> 
     <div id="<%= "average_rating_#{form_id}" %>" class="average-rating" data-rating="<%= casino.id %>"> 
      <span><%= casino.average_rating.to_f.round(2) %></span></div> 
     <input type="range" value="<%= casino.average_rating.to_f.round(2) %>" step="0.5" id="backing_<%= casino.id %>"> 
     <div id="<%= "rate_#{casino.id}" %>" class="rateit" data-rateit-mode="font" data-rateit-backingfld="#backing_<%= casino.id %>" data-rateit-resetable="false" data-rateit-min="0" data-rateit-max="5"> 
     </div> 
     <div class="review"><%= link_to 'Review', '#' %></div> 
     </td> 
     <td><a class="btn btn-primary play-now" href="<%= casino.play_now_link %>" target="_blank">Play now</a></td> 
     <td><a class="more" role="button" data-toggle="collapse" href="#additional_row<%= index %>" aria-expanded="false" aria-controls="collapseExample">More</a><div class="triangle"></div></td> 
     <tr class="collapse additional-row" id="additional_row<%= index %>"> 
     <td colspan="6"> 
      <div> 
      <%= casino.name %> 
      </div> 
     </td> 
     </tr> 
    </tr> 
    <% end %> 
</table>

あなたが見ることができるように、私はMoreリンクをクリックしたとき、表が展開し、それが私の1つの以上の行を示しています。その行は、上記の行と同じ色にする必要があります。したがって、最初の行はbackground-color: #ffffffで、展開された行は同じCSSプロパティです。次の行 - background-color: #f5f5f5、次の展開された行もその色を持つ必要があります。等々。私は私のCSSで試した：

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

.table-striped > tbody > tr > .additional-row:nth-child(even) td, 
.table-striped > tbody > tr > .additional-row:nth-child(even) th { 
    background-color: #f5f5f5; 
} 

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

.table-striped > tbody > tr > .additional-row:nth-child(odd) td, 
.table-striped > tbody > tr > .additional-row:nth-child(odd) th { 
    background-color: #ffffff; 
}

しかし、それは役に立たなかった。どのようにこの問題を解決するための任意のアイデアですか？ありがとう。

EDIT：

出典

2017-01-04 Alex Zakruzhetskyi

嘆願スクリーンショットを追加します。 seはスクリーンショットを追加します。 –

試してみてください：私は解決策を見つけた

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

出典

2017-01-04 13:37:53

しかし、これは 'nth-child（odd）'と同じです –

そして、1番目と展開された行は1つの色にする必要があります。例えば、白、2番目と2番目に展開された行次の2行は白などです。 –

通常、あなたのコードが何をするかについての説明を追加することをお勧めします。これにより、より新しい開発者は、コージングの仕組みを理解することができます。 –

：

.table > tbody > tr > td, 
.table > tbody > tr > th { 
    background-color: #f5f5f5; 
} 

.table > tbody > tr:nth-child(4n-2) > td, 
.table > tbody > tr:nth-child(4n-2) > th { 
    background-color: #ffffff; 
} 

.table > tbody > tr:nth-child(4n-3) > td, 
.table > tbody > tr:nth-child(4n-3) > th { 
    background-color: #ffffff; 
}

出典

2017-01-04 17:32:47

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Bootstrap Example</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
<h2>Contextual Classes</h2> 

<table class="table"> 
    <thead> 
    <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Default</td> 
     <td>Defaultson</td> 
    </tr> 
    <tr class="success"> 
     <td>Success</td> 
     <td>Defaultson</td> 
    </tr> 
    <tr class="success"> 
     <td>Success</td> 
     <td>Doe</td> 
    </tr> 
    <tr class="danger"> 
     <td>Danger</td> 
     <td>Moe</td> 
    </tr> 
    <tr class="info"> 
     <td>Info</td> 
     <td>Dooley</td> 
    </tr> 
    <tr class="warning"> 
     <td>Warning</td> 
     <td>Refs</td> 
    </tr> 
    <tr class="active"> 
     <td>Active</td> 
     <td>Activeson</td> 
    </tr> 
    </tbody> 
</table> 
</div> 

</body> 
</html>

contextual classes

出典

2017-01-04 17:51:18

タグの 'class'は、バックグラウンドカラーie- class = "success"、 "danger"、 "info"、 "warning"、 "active"を与えるためにブートストラップで与えることができます。 **発見のためのおめでとうございます** - @Alex Zakruzhetskyi –

バックグラウンドカラーをブートストラップテーブルの行に変更するにはどうすればよいですか（崩壊したテーブルを使用して）

答えて

関連する問題