Question

How can I make my border-bottom not overwrite my border for my table? I what the sides to be complete black and not with a little bit of gray — or “grey” for you all in England. 😉

UPDATE: Not concerned with the bottom border of the table getting overwritten — I’m hoping to eliminate on the sides where the border is gray.

Here is my code I’m working with and a jsfiddle.net page for your convience 😉

<table>
    <tr>
        <td>row1</td>
    </tr>
    <tr>
        <td>row2</td>
    </tr>
    <tr>
        <td>row3</td>
    </tr>
    <tr>
        <td>row4</td>
    </tr>
</table>

table {
    border: 4px solid #000;
    width: 400px;
}

table tr {
    border-bottom: 4px solid #CCC;
}

Answer 1

Set border-collapse:separate to your table, and add the border to the td‘s instead of the tr‘s:

http://jsfiddle.net/ptriek/uJ5zN/2/