I am a novice with Bootstrap and exploring ways to customize the default table colors, specifically the rows. I want to change the color to a solid one without modifying the original Bootstrap CSS file. Despite trying to override it with a new class, Bootstrap continues to display the default colors. I am currently working with Odoo version 8, but I don't think that should impact my ability to make these changes.
Here is the code for my table:
<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>
After examining the Bootstrap CSS, it seems like this is the specific code responsible for styling tables in my case:
}
.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;
}