如何更改Bootstrap警告級別錶行的顏色

Question

我是Bootstrap和CSS的新手，並且有一些表的着色問題。我有一個這樣的表格，有一些行有類警告：

<table class="table table-bordered grocery-crud-table table-hover"> 
<thead> 
<tbody> 
<tr class="warning"> 
<tr> 
<tr> 
</tbody> 
</table> 

如何更改警告類的行顏色？我試過以下，但它不起作用。

.warning { 
     background-color:#76A0D3; 
    } 

Answer 1

在你的情況td的彩殼tr

table tr td { 
 
    padding: 20px; 
 
    background: transparent !important; 
 
} 
 
.warning { 
 
    background: #76A0D3; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<table class="table table-bordered grocery-crud-table table-hover"> 
 
    <tbody> 
 
    <tr class="warning"> 
 
     <td> 
 
     Hey 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

如果你把它放在它按預期工作

table tr td { 
 
    padding: 20px; 
 
} 
 
.warning { 
 
    background: #76A0D3 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<table class="table table-bordered grocery-crud-table table-hover"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="warning"> 
 
     Hey 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

試試這個CSS：

修訂

table.table.table-hover tr.warning, 
table.table.table-bordered tr.warning, 
table.table.grocery-crud-table tr.warning{ 
    background-color:#76A0D3; 
} 

演示：https://jsfiddle.net/hLbu0hov/

Answer 3

添加到背景色很重要：

.warning{ 
    background-color:#76A0D3 !important; 
}