user3116554 user3116554 - 4 months ago 61
HTML Question

How to change color of Bootstrap warning class table row

I'm new to Bootstrap and CSS and having some issues with coloring of tables. I have a table like this with some rows which have the class warning:

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


How do I change the color of rows with the warning class? I've tried the following but it doesn't work.

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

Answer

In your case the td's color covers the 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>

If you set it on the td it works as expected

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>

Comments