{"title\_suggestion": "Create bordered table with gray cells and blue headers"}

by Bruno G.

HTML

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

CSS

body { margin:10px }
table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
    padding: 5px;
    background-color: gray;
    color: white;
}

th {
    background-color: green;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

th:first-child { border-radius: 6px 0 0 0; }
th:last-child { border-radius: 0 6px 0 0; }

/* tr:last-child td:first-child { border-radius: 0 0 0 6px; } */
/* tr:last-child td:last-child { border-radius: 0 0 6px 0; } */