如何更改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; 
}