What is the best way to change the border color of the boot table?

Question

I am using the bootstrap class. The default border color is gray / silver - I think.

But I want to change the border-color to red , but I could not get it to work.

This is what I have

---

CSS

.table { border: red solid 1px !important; } 

---

HTML: Table

 <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"> &gt; 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">&ge; 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> 

Here is my JSFiddle

---

What is the best way to change the border color of the boot table?

Answer 1

Try applying it to the cells:

 .table td{ border: red solid 1px !important; } 

For the title:

 .table th{ border: red solid 1px !important; } 

http://jsfiddle.net/w0b73dwt/7/

---

EDIT

OBS: I used the directive ! important because I did not find another easy way to do this. Of course, we all know that this is bad css practice, but in some cases we will have to take risks. Another way is to find how bootstrap declares its style and creates a higher priority css selector for td and th . In this case, it may break during the first bootstrap update.