CSS outside table border of different color than inside 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 styles like this:

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 have trying to achieve is to have a border around the table of a different color than the border inside the table.

I want the outside border to be darker (#222) than the inside border (#888).

Answer 1

td & table borders will collapse on the outside. I would just add a div around the table and add the #222 border to it.

Edit: and yes, that would mean moving the caption outside of the table tag, or adding a negative margin-top to the table.

Answer 2

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