Question

我在我的应用中使用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链接时，表格会展开，然后会再显示一行。我需要该行与上面的行颜色相同。因此，第一行应该有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;
}

但它没有帮助。有关如何解决这个问题的任何想法？感谢。

编辑：添加截图：

Answer 1

尝试：

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

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

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>

contextual classes

如何将背景颜色更改为引导表行（使用表剥离），这些行正在折叠

3 个答案: