Переопределение бутстрапов Таблицы строк строк

Question

Я новичок в Bootstrap и пытаюсь переопределить цвета таблицы загрузки Bootstraps, особенно строки, я бы хотел определить другой сплошной цвет. Я попытался переопределить новый класс, но Bootstrap продолжает отображать цвета по умолчанию. Я не хочу редактировать исходный файл CSS Bootstrap. Обратите внимание, что я пытаюсь сделать это с помощью Odoo версии 8, но я уверен, что это не имеет значения.

Ниже мой стол:

<table class="table"> 
      <thead> 
       <tr class="filters"> 
        <th><input type="text" class="form-control" placeholder="#" disabled=""></th> 
        <th><input type="text" class="form-control" placeholder="First Name" disabled=""></th> 
        <th><input type="text" class="form-control" placeholder="Last Name" disabled=""></th> 
        <th><input type="text" class="form-control" placeholder="Username" disabled=""></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>Mark</td> 
        <td>Otto</td> 
        <td>@mdo</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>Jacob</td> 
        <td>Thornton</td> 
        <td>@fat</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>Larry</td> 
        <td>the Bird</td> 
        <td>@twitter</td> 
       </tr> 
      </tbody> 
     </table> 

Из того, что я могу сказать, глядя на Bootstrap CSS я могу видеть, что это код, который применяется:

} 
.table > thead > tr > th, 
.table > tbody > tr > th, 
.table > tfoot > tr > th, 
.table > thead > tr > td, 
.table > tbody > tr > td, 
.table > tfoot > tr > td { 
    padding: 8px; 
    line-height: 1.42857143; 
    vertical-align: top; 
    border-top: 1px solid #000; 
} 

Answer 1

Я знаю, что ты сказал, что ты «Я попытался добавить свой собственный класс и переопределить (что является правильным способом) без успеха, но, пожалуйста, взгляните ниже - у меня все получилось, добавив мой собственный класс .custom, а затем переопределив CSS с помощью .table.custom > thead > tr > td {}

.table.custom > thead > tr > th, 
 
.table.custom > tbody > tr > th, 
 
.table.custom > tfoot > tr > th, 
 
.table.custom > thead > tr > td, 
 
.table.custom > tbody > tr > td, 
 
.table.custom > tfoot > tr > td { 
 
    background-color: red; 
 
    border-top: 4px solid #fff; 
 
} 
 
//for custom table row 
 

 
.table.custom tr { 
 
     background-color: red; 
 
     border-top: 4px solid #fff; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<table class="table custom"> 
 
      <thead> 
 
       <tr class="filters"> 
 
        <th><input type="text" class="form-control" placeholder="#" disabled=""></th> 
 
        <th><input type="text" class="form-control" placeholder="First Name" disabled=""></th> 
 
        <th><input type="text" class="form-control" placeholder="Last Name" disabled=""></th> 
 
        <th><input type="text" class="form-control" placeholder="Username" disabled=""></th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td>1</td> 
 
        <td>Mark</td> 
 
        <td>Otto</td> 
 
        <td>@mdo</td> 
 
       </tr> 
 
       <tr> 
 
        <td>2</td> 
 
        <td>Jacob</td> 
 
        <td>Thornton</td> 
 
        <td>@fat</td> 
 
       </tr> 
 
       <tr> 
 
        <td>3</td> 
 
        <td>Larry</td> 
 
        <td>the Bird</td> 
 
        <td>@twitter</td> 
 
       </tr> 
 
      </tbody> 
 
     </table>

Примечание: Вы должны будете сделать некоторую работу, конечно, чтобы он смотрит, как вы хотите, но она демонстрирует точку.