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

This question already has answers here: Using CSS to make table's outer border color different from cells' border color (5 answers) Closed 1 year ago.

I have a table like this:

    <table>
        <caption>Caption:</caption>
        <thead&g开发者_如何学JAVAt;
            <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).

---

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).

For 1px solid borders, a simpler solution than the original is:

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

For border widths greater than 1px, and keeping a "solid" border style, set the table border width at least 1px geater than the td border width, such as:

table { border: 3px solid #222; border-collapse: collapse; }
td    { border: 2px solid #888;  }

This works well in Firefox and Chrome (for versions since 2011 at least).

However, IE8 has inconsistencies: using dark outer/light inner border colors, the inner borders end up a dark muddy mix of the outer/inner colors. But, with light outer/dark inner borders, IE8 seems to work ok.

In anycase, a great tool for experimenting with table styles is the
HTML and CSS Table Border Style Wizard

---

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

---

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.

---

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