html - Table with spacing before/after separation line between rows -

i'm trying build html table separation line between rows. main concern fact need add padding left/right in tbody. tried different things, such:

• add :before/:after floating element add space
• add border-collapse: collapse table, add border tbody, lost border on table doing that

here table:

and need do:

codepen source: http://codepen.io/anon/pen/gojuw

do have suggestion?

thanks

how setting left , right border in first , last <td>, respectively? see working example in here. works 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; }