CODEWITHSUNDEEP
htmlcsssass
nunoarruda
nunoarruda

Reputation: 2904

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

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?

Upvotes: 7

Views: 4559

Answers (4)

Vucko
Vucko

Reputation: 20834

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.

Upvotes: 2

austinthedeveloper
austinthedeveloper

Reputation: 2601

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!

Upvotes: 5

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

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.

Upvotes: 0

aahhaa
aahhaa

Reputation: 2275

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

Upvotes: 2

Related Questions