Как перезаписать bootstrap цвет фона строки таблицы

Question

У меня есть динамически сгенерированная таблица, и некоторые строки должны иметь настраиваемый цвет фона.

<table class="table table-striped">
 <tbody>
  <tr class="bg-coral">...</tr>
  <tr class="bg-coral">...</tr>
  <tr>...</tr>
 </tbody>
</table>

Я также хочу использовать класс table-striped, на всякий случай, если нет цветных строк, альтернативный Цвета по умолчанию сделают его красивым.

Однако здесь, как вы видите, хотя первая строка имеет настраиваемый класс, она не окрашена. Я думаю, что причиной является класс нечетных строк bootstrap table-striped.

Пытался написать это, но не повезло:

 .bg-coral{
    background-color: coral;
  }

.table-striped tbody tr.bg-coral, 
.table-striped tbody tr.bg-coral:nth-of-type(odd) {
    background-color: coral;
}

Вы можете проверить проблему здесь:
https://jsfiddle.net/6kv3b47q/

Какой класс css я могу написать, чтобы все <tr> с классом bg-coral имели цвет фона.

Answer 1

Думаю, это то, что вы ищете

.table-striped tbody tr:nth-of-type(odd) {
    background-color: coral!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
 <tbody>
  <tr>
    <td>hello</td>
   </tr>
  <tr>
    <td>hiii</td>
   </tr>
 <tr>
    <td>hello</td>
   </tr>
  <tr>
    <td>hiii</td>
   </tr>
 </tbody>
</table>