I use bootstrap table class. The default border color is grey/silver - I think.
But I want to change the border-color to red , but I couldn't get it to work.
This is what I have
.table {
border: red solid 1px !important;
}
<table class="table table-bordered piechart-key ">
<thead >
<th></th>
<th></th>
<th> Item Summary</th>
<th> Item List</th>
</thead>
<tbody>
<tr>
<td width="30"></td>
<td width="200">
> 50% of students answered these items correctly
</td>
<td width="50">5/25</td>
<td width="100">5,10,15,19,23</td>
</tr>
<tr>
<td width="30"></td>
<td width="200">50% up to 75% of students answered these items correctly</td>
<td width="50">8/25</td>
<td width="100">3,7,11,13,14,16,21,22</td>
</tr>
<tr>
<td width="30"></td>
<td width="200">≥ 75% of students answered these items correctly</td>
<td width="50">12/25</td>
<td width="100">1,2,4,6,8,9,12,17,18,20,24,25</td>
</tr>
</tbody>
</table>
What is the best way to change the border-color of a bootstrap table ?
Try to apply it to the cells:
.table td{
border: red solid 1px !important;
}
For the header:
.table th{
border: red solid 1px !important;
}
http://jsfiddle.net/w0b73dwt/7/
EDIT
OBS: I used the !important directive 'cause I didn't find other simple way to do it. Of course, we all know it is a bad css practice, but in some cases we'll have to run the risk. Other way would be to find exactly how bootstrap declares its style and create a css selector with higher priority for td and th . In this case this could break at the first bootstrap update.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.