ブートストラップのテーブル行の色のオーバーライド

Question

私はブートストラップには新しく、ブートストラップのデフォルトのテーブルの色、特に行をオーバーライドしようとしています。別の単色を定義したいと思います。私は新しいクラスでオーバーライドしようとしましたが、Bootstrapはデフォルトの色を表示し続けます。私はオリジナルのブートストラップCSSファイルを編集したくありません。私は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> 

私はこれが適用されているコードで見ることができますブートストラップ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>

注：あなたはそれはあなたがそれを望むように見てもらうためにコースのいくつかの作業を行う必要があるでしょうが、それはポイントを示しています。