Как изменить фоновый цвет на строки загрузочных таблиц (с использованием таблицы), которые свертываются

Я использую 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; 
}

Но это не помогло. Любые идеи о том, как решить эту проблему? Благодарю.

EDIT: Добавить скриншот:

источник

2017-01-04 Alex Zakruzhetskyi

Мольба se добавить скриншот. –

Try:

.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-я и расширенная строка были одного цвета, например, белого цвета, 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

Вы можете дать «класс» тега в режиме начальной загрузки для получения цветов фона i.e-class = «успех», «опасность», «информация», «предупреждение», «активная». ** ПОЗДРАВЛЕНИЕ ПО ВЫБОРУ РЕШЕНИЯ ** - @Alex Zakruzhetskyi –

Как изменить фоновый цвет на строки загрузочных таблиц (с использованием таблицы), которые свертываются

ответ

Смежные вопросы