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

Question

This is the desired effect: enter image description here

And this 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;
        }
      }
    }
  }
}

It's just missing the space between the table row and the table border. I've tried using margin, padding, border, border-collapse but I couldn't achieve the desired effect. Any ideias?

Styling tables, especially table rows are notoriously tough to style. As a result I think you'll end up having to use a solution that is a bit "dirty" like adding extra columns or inserting a DIV inside each table cell. — hungerstar, Dec 10 '14 at 18:42
I don't think you can set the width of the border ... The content need to be nested in something inside the td and apply the border to it. Or add extra td as suggested by @wlin. You can add an extra row with rowspan that only contains a div with margin-left and right with the border. — Mathieu Labrie Parent, Dec 10 '14 at 18:46
@chipChocolate.py I think you're missing the point. Check screenshot. I need spacing between the table rows and the table border and not the other way around. But thanks for the effort! — nunoarruda, Dec 10 '14 at 19:27

score 5 · Accepted Answer · answered Dec 10 '14 at 21:03

Check this fiddle:

The most important thing I did was wrap the first and last items in divs and styled them:

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

This allowed me to take off the padding/border of the td and move it to the divs:

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 remove !important on the padding because that was messing with the new code. The borders are now attached to the divs inside first and last child instead of the tds!

score 2 · Answer 2 · answered Dec 10 '14 at 18:35

2

I know this is a dumb hack. but I just put an empty cell in in it. I hope someone have a good solution to this.

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;
}

answered Dec 10 '14 at 18:35

aahhaa

2,240
3
19
30

Thanks for the effort! Indeed this is hacky and not semantic since it requires extra markup to achieve the visual effect but it is something :) I hope someone comes with a CSS only solution. – nunoarruda Dec 10 '14 at 18:39
Just a thought, if you add `border-left/right` of color white to `tr`, and border the whole table. change `separate` to `collapse` – aahhaa Dec 10 '14 at 19:04
border on `tr` overflows, doesn't stay inside the table and has weird behaviour. – nunoarruda Dec 10 '14 at 20:02
Unfortunately you'll get some artifacts from doing that. The ends of a border meet at 45 degree angles. – hungerstar Dec 10 '14 at 20:02

score 2 · Answer 3 · answered Dec 10 '14 at 21:12

How about instead of adding border to td, you add it to a span inside of a 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's */
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'm adding padding to the td, and using display:block to spans inside of td so they would get all the width.

Rick Hitchcock · Answer 4 · 2014-12-10T20:59:21.063

0

I would simply add a horizontal rule (<hr>) between rows:

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

If you style the hr, it will have minimal impact on your layout:

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

Not exactly semantic, but it gets the job done.

Fiddle

Note that I've removed the table class from the table, because it's not defined in your style sheet, so it's picking up jsFiddle's styling instead.

edited Dec 10 '14 at 20:59

answered Dec 10 '14 at 20:46

Rick Hitchcock

35,202
5
48
79

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

4 Answers4

Fiddle