Question

Here is how I style tables now:

#content table {
    width: 100%;
    margin-top: 1em;
    border-collapse: collapse;
    border: 1px solid #222; 
}
#content table td {
    border: 1px solid #888;
    padding: .3em;
}

What I am trying to achieve is to have tables with black outside border (#222). However, I want the inside border to be lighter color (let’s say #888). How can I achieve this?

Answer 1

Why not have a div container for the table and set it’s border as required. Then simply set the table border independently?

Markup:

<div class='outerDiv'>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>

Css:

.outerDiv{ border:solid 2px #222; }
.outerDiv table { border:solid 2px #888; }