How do I remove the 'double border' on the inside walls of this table? CSS

Problem

I have the follwing HTML and CSS:

HTML

<table>
    <tbody>
        <tr>
            <td>Row one, cell one</td>
            <td>Row one, cell two</td>
        </tr>
        <tr>
            <td>Row two, cell one</td>
            <td>Row two, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
    </tbody>
</table>

CSS

tbody tr:last-child td:first-child {
    border-radius: 0 0 0 0.6em;
}
tbody tr:last-child td:last-child {
    border-radius: 0 0 0.6em 0;
}
tbody tr:first-child td:first-child {
    border-radius: 0.6em 0 0 0;
}
tbody tr:first-child td:last-child {
    border-radius: 0 0.6em 0 0;
}

http://jsfiddle.net/daft/LwT7k/

If you inspect the table, you'll see it has

border-collapse: seperate;
border-spacing: 0;

For whatever reason, these are required to get the curved edges. Unfortunately, this also results in each cell having a border on it's inside walls, and when the cells collapse together, it seems as if the inside walls all have double thick border.

Is there any way to fix this with pure CSS or HTML?

Problem courtesy of: Daft

Solution

Update your CSS like below.

table {
   border-spacing: 0;
 }
th, td {
border-bottom:1px solid #000;
border-left:1px solid #000;
padding: 0.5em 1em;
}

tbody tr:last-child td:first-child {
border-radius: 0 0 0 0.6em;    
}
tbody tr:last-child td:last-child {
border-radius: 0 0 0.6em 0;
}
tbody tr:first-child td:first-child {
border-radius: 0.6em 0 0 0;
border-top:1px solid #000;
}
tbody tr:first-child td:last-child {
border-radius: 0 0.6em 0 0;
border-top:1px solid #000;
}
tbody tr td:last-child{
border-right:1px solid #000;
}

FIDDLE DEMO

Solution courtesy of: Suresh Ponnukalai

Discussion

Try to set cellpadding and cellspacing on your table tag:

<table cellpadding="0" cellspacing="0">

Hope it helps.

Discussion courtesy of: meeming

Try like this: Link

CSS:

th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
}
td {
    border-bottom:0px solid #000;
}
tr:last-child td {
    border-bottom:1px solid #000;
}
td:first-child {
    border-right:0px solid #000;
    border-right:0px solid #000;
}
Discussion courtesy of: G.L.P
th, td {
    border: 1px solid #000;
    border-bottom: none;
    border-right: none;
    padding: 0.5em 1em;
}

tr:last-child td {
    border-bottom: 1px solid #000;
}

tr td:last-child {
    border-right: 1px solid #000;
}

DEMO

Discussion courtesy of: Turnip

This recipe can be found in it's original form on Stack Over Flow.