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; }
Comments
Post a Comment