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

在您的情况下，@Component public class ApplicationWrapper { @Resource(name = "factory.soapClient") private SoapClientFactory soapClientFactory; @Autowired private JsonUtil jsonUtil; @Autowired private DomainUtil domainUtil; private static final String clientId = "soapClient"; public String execute(String request, String apiName){ Object req = domainUtil.createRequest(request, apiName); Object jaxbResponse = this.soapClientFactory.getClient(clientId).marshalSendAndReceive(req); Object response = domainUtil.createResponse(jaxbResponse, apiName); return jsonUtil.toJsonString(response) ; } } 的颜色涵盖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>上设置它按预期工作

td

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

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

添加！important到background-color：

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