Using CSS to Make Table's Outer Border Color Different from Cells' Border Color

Using CSS to make table's outer border color different from cells' border color

I would acheive this by using adjacent selectors, like so:

table {
    border: 1px solid #000;
}

tr {
    border-top: 1px solid #000;
}

tr + tr {
    border-top: 1px solid red;
}

td {
    border-left: 1px solid #000;
}

td + td {
    border-left: 1px solid red;
}

It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.

This won't of course work in IE6 as it doesn't understand the adjacent selectors.

http://jsfiddle.net/JaF5h/36/

How to make outer border of table to be of a colour different from inner in HTML?

There are two possible solutions here (from what I can see):

1. Wrap the table (with standard or silver border) in a div with a blue border.

2. Insert the table (with standard or silver border) in another table's cell. Give the "outer" table a blue border.

I think the first option is much better.

CSS outside table border of different color than inside borders between table cells

I've added an extra line to your table for the purposes of this demonstration...

<table>
    <caption>Caption:</caption>
    <thead>
        <tr>
            <th style="width: 65%;" class="first">A</th>
            <th class="center" style="width: 5%;">B</th>
            <th style="width: 15%;">C</th>
            <th style="width: 15%;" class="last">D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="first">aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td class="last">ddd</td>
        </tr>
        <tr class="final">
            <td class="first">aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td class="last">ddd</td>
        </tr>
    </tbody>
</table>

And here is the CSS.

table {
    width: 100%;
    margin-top: 1em;
    border-collapse: collapse;
}

th, td {
    vertical-align: middle;
    border: 1px solid #888;
    padding: .2em .4em;
}

table > thead > tr > th {
    border-top: 1px solid #111;
}

tr.final > td {
    border-bottom: 1px solid #111;
}

.first {
    border-left: 1px solid #111;
}

.last {
    border-right: 1px solid #111;
}

Added jsfiddle link for previewing the code

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

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>

table.CommonTableStyle1 table, th, td

table.CommonTableStyle1 th, table.CommonTableStyle1 td