24

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>
nam
  • 21,967
  • 37
  • 158
  • 332

6 Answers6

51

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>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
ab29007
  • 7,611
  • 2
  • 17
  • 43
7

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

sinisake
  • 11,240
  • 2
  • 19
  • 27
1

It's probably the elements inside that have the border, in which case the inline style needs to be applied to the element that has the border, like the td

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td style="border-color:white;">asdf</td>
  </tr>
</table>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
1

If you want to only target the table header use the following code:-

http://www.bootply.com/oAYBUqQet3

.table-bordered > tbody > tr > th {
     border: 1px solid blue;
}
Tony Hensler
  • 1,482
  • 5
  • 15
  • 30
1

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>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
Hani Abu khurma
  • 91
  • 1
  • 5
1

Try this:

table.table-bordered{
    border:1px solid blue!important;
    margin-top:20px;
  }
table.table-bordered > thead > tr > th{
    border:1px solid blue!important;
}
table.table-bordered > tbody > tr > td{
    border:1px solid blue!important;
}
Adrian
  • 379
  • 4
  • 10