How to change the border color of bootstrap table using inline css

Question

Although inline css is not recommended but I just want to test it in one special case and hence want to override the default border color of a bootstrap table to white. But the following does not work. It still displays the default border color of a bootstrap table. How can it be achieved or what are other alternatives without using javascript or without messing around with default bootstrap css?

<table class="table table-bordered" style="border-color:white;">
...
...
</table>

Answer 1

Using only style="border-color:white;" sets the table border to white but they are being overwritten by the th and td styles.

You have to set it for every th and td too. If you are using only only Inline css then that will be time consuming. The easier way would be to include the styles in css and use direct-child sign (>) to give the style preference. Like this.

table.table-bordered > thead > tr > th{
  border:1px solid blue;
}

Here is a working snippet :

table.table-bordered{
    border:1px solid blue;
    margin-top:20px;
  }
table.table-bordered > thead > tr > th{
    border:1px solid blue;
}
table.table-bordered > tbody > tr > td{
    border:1px solid blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

Easiest way is to add your own CSS file, with custom changes, after bootstrap default CSS. Not sure about version you use, but this is how applying of border looks in 3.3.7, and you have to overwrite that rule:

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid red; //your desired color
}

Demo: http://www.bootply.com/T5xU5ismja