Table with spacing before/after separation line between rows

Question

I'm trying to build a HTML table with separation line between rows. My main concern is mainly the fact I need to add a padding left/right in my tbody. I tried different things, such:

• Add :before/:after floating element to add the space
• Add border-collapse: collapse to the table, then add a border to the tbody, but I lost my border on the table doing that

Here is my table:

And this is what I need to do:

Codepen for the source: http://codepen.io/anon/pen/gojuw

Do you have any suggestion?

Thanks

Answer 1

How about setting up a left and right border in the first and last <td>, respectively? See working example in here. It works something like this:

HTML:

<div id="table_wrapper">
    <table>
        <thead>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
        </thead>
        <tbody>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
            <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td></tr>
        </tbody>
    </table>
</div>

CSS:

#table_wrapper {
    border: 1px solid #ddd;
}
table {
    border-collapse: collapse;
}
thead td {
    background-color: #eee;
}
thead td:first-child {
    border-left: 20px solid #eee;
}
thead td:last-child {
    border-right: 20px solid #eee;
}
tbody td {
    background-color: white;
}
tbody td:first-child {
    border-left: 20px solid white;
} 
tbody td:last-child {
    border-right: 20px solid white;
}