What is the best way to change the border-color of a bootstrap table?

Question

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

---

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 a bootstrap table ?

Answer 1

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.