How to have left and right spacing between table rows and table edge?

Question

This is the desired effect:

And here is what I came up with: http://jsfiddle.net/nunoarruda/3j6782js/

// table .sw-table { border-collapse: separate; thead { background-color: $orange; color: $white; font-size: 15px; th { border: none !important; font-weight: 600; padding-top: 5px !important; padding-bottom: 5px !important; margin: 30px 27px !important; &:first-child { border-top-left-radius: 10px; padding-left: 25px; } &:last-child { border-top-right-radius: 10px; } } } tbody { color: $black; tr { td { border-color: $greyish; padding-top: 10px !important; padding-bottom: 10px !important; } td:first-child { border-left: 1px solid $greyish; padding-left: 25px; } td:last-child { border-right: 1px solid $greyish; } &:first-child td { border-top: none; } &:last-child td { border-bottom: 1px solid $greyish; &:first-child { border-bottom-left-radius: 10px; } &:last-child { border-bottom-right-radius: 10px; } } } } } 

There is simply no space between the table row and the table border. I tried using margin, padding, border, border-collapse, but I could not achieve the desired effect. Any ideas?

Answer 1

Check out this script:

The most important thing I did was wrap the first and last elements in a div and style them:

 <td> <div>Brand name</div> </td> 

This allowed me to remove the td registration / border and move it to a div:

 td:first-child { border-left: 1px solid $greyish; padding-left: 25px; padding-top: 0; padding-right: 0; border-top: none; div { border-top: 1px solid $greyish; padding-top: 10px; padding-right: 8px; } } 

The last thing I did was delete! important to fill out because it was messing with the new code. Now the borders are tied to divs inside the first and last children instead of tds!

Answer 2

I know this is a stupid hack. but I just put an empty cell in it. Hope someone has a good solution.

http://jsfiddle.net/3j6782js/1/

 <tr> <td class='space'></td> <td>Brand name</td> <td>2</td> <td> <a class='btn btn-purple btn-xs sw-btn' href='#'>MANAGE CAMPAIGNS</a> <a class='btn btn-grey btn-xs sw-btn' href='#'>EDIT</a> </td> </tr> .space { width:10px !important; border-top:none !important; } 

Answer 3

How about adding border to td , you add it to span inside td . Quick example:

 body{ margin:0; padding:10px; } table{ width:100%; /* reset */ border-collapse: collapse; border-spacing: 0; } /* some padding top/bottom for every td */ td{ padding-top:10px; padding-bottom:10px; margin:0; } /* first and last row border */ table tr:first-child{border-top: 1px solid black} table tr:nth-child(3){border-bottom: 1px solid black} /* adding padding to the td */ table tr>td:first-of-type{padding-left: 10px; padding-right:0; border-left: 1px solid black;padding-left:50px} table tr>td:nth-of-type(2){padding-left:0;padding-right:0;} table tr>td:nth-of-type(3){padding-right: 10px; padding-left: 0; border-right: 1px solid black;text-align:right; padding-right: 50px;} /* adding border to spans */ table tr>td:first-of-type>span{border-bottom: 1px solid black; display:block;} table tr>td:nth-of-type(2)>span{border-bottom: 1px solid black; display:block;} table tr>td:nth-of-type(3)>span{border-bottom: 1px solid black; display:block;} 

 <table> <tr> <td><span>11</span></td> <td><span>12</span></td> <td><span>13</span></td> </tr> <tr> <td><span>21</span></td> <td><span>22</span></td> <td><span>23</span></td> </tr> <tr> <td><span>31</span></td> <td><span>32</span></td> <td><span>33</span></td> </tr> </table> 

Jsfiddle

I add padding to td and using display:block to spans inside td so that they get the full width.

Answer 4

I would just add a horizontal rule ( <hr> ) between the lines:

 <tr><td colspan="3"><hr> 

If you draw hr , this will have minimal impact on your layout:

 hr { background: #ddd; height: 1px; margin: 0px; } 

Not entirely semantic , but it does its job.

Fiddle

Note that I removed the table class from the table because it is not defined in your stylesheet, so choose the jsFiddle style instead.