How can I change background-color to bootstrap table rows(using table-stripped), which are collapsing

Question

I'm using bootstrap in my app, and I want to make my table-striped table to use different background-colors. This is my code:

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

As you can see, when I click on a More link, the table expands, and it shows me one more row. I need that row be the same color, as the row above. So, the first row should have background-color: #ffffff , and the expanded row - the same css property. The next row - background-color: #f5f5f5 , also the next expanded row should have that color too. And so on. I tried in my 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;
}

But it didn't help. Any ideas of how to solve this issue? Thanks.

EDIT: Add a screenshot:

Answer 1

Try:

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

Answer 2

I've found the solution:

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

Answer 3

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

上下文类

How can I change background-color to bootstrap table rows(using table-stripped), which are collapsing

Question

3 answers

solution1
0 2017-01-04 13:37:53

solution2
0 2017-01-04 17:32:47

solution3
0 2017-01-04 17:51:18

How can I change background-color to bootstrap table rows(using table-stripped), which are collapsing

Question

3 answers

solution1 0 2017-01-04 13:37:53

solution2 0 2017-01-04 17:32:47

solution3 0 2017-01-04 17:51:18

solution1
0 2017-01-04 13:37:53

solution2
0 2017-01-04 17:32:47

solution3
0 2017-01-04 17:51:18