CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nam
nam

Reputation: 23749

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

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>

Upvotes: 24

Views: 123430

Answers (6)

Adrian
Adrian

Reputation: 399

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;
}

Upvotes: 1

Hani Abu khurma
Hani Abu khurma

Reputation: 101

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>

Upvotes: 1

Tony Hensler
Tony Hensler

Reputation: 1492

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;
}

Upvotes: 1

ab29007
ab29007

Reputation: 7766

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>

Upvotes: 52

sinisake
sinisake

Reputation: 11328

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

Upvotes: 7

Michael Coker
Michael Coker

Reputation: 53674

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>

Upvotes: 1

Related Questions