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

Question

I have a table like this:

    <table>
        <caption>Caption:</caption>
        <thead>
            <tr>
                <td style="width: 65%;">A</td>

                <td class="center" style="width: 5%;">B</td>
                <td style="width: 15%;">C</td>
                <td style="width: 15%;">D</td>
            </tr>
        </thead>
        <tbody>
            <tr>

                <td >aaa</td>
                <td>bbb</td>
                <td>ccc</td>
                <td>ddd</td>
            </tr>
        </tbody>
    </table>

With such styles:

table {
    width: 100%;
    margin-top: 1em;
    border-collapse: collapse;
    border: 1px solid #111;
}
table th, table td {
    vertical-align: middle;
}
table td {
    border: 1px solid #888;
    padding: .2em .4em;
}

What I'm trying to achieve is to have a border around the table of a different color than the border inside the table.

I want the outer border to be darker (# 222) than the inner border (# 888).

Answer 1

I added an extra row for your table for the purpose of this demo ...

<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 to preview code

Answer 2

What I'm trying to achieve is to have a border around the table a different color than the border inside the table.

, (# 222), (# 888).

, , , :

table { border: 1px solid #222; border-collapse: collapse; }
td    { border: 1px inset #888;  }

Firefox Chrome ( 2011 ).

IE8 : / , / . , / , IE8, , .

- HTML CSS

Answer 3

td . div # 222.

: , .

Answer 4

Fixed without any additional classes.

support: ie8 + because of: last-child selector    http://jsfiddle.net/nyu7n/87/

table {
    width: 80%;
    margin: 2em auto;
    border: 1px solid blue;
}
td {
   border-bottom: 1px solid red;
    border-left: 1px solid red;
    padding: .2em .4em;
}
td:first-child {
    border-left: none;
}
tr:last-child td {
    border-bottom: none;
}