CODEWITHSUNDEEP
htmlcss
Samantha J T Star
Samantha J T Star

Reputation: 32848

How to add space between CSS table rows?

I have a grid that is using CSS display: table;.

What I would like to do is to have a gap between the rows.

Is there a way I can do that when using display: table-row;. I already tried padding and margin but these don't work for me as I want to set the margin background color.

Upvotes: 5

Views: 23577

Answers (3)

James Donnelly
James Donnelly

Reputation: 128856

For Individual Cells

You can achieve this with a transparent border:

border: 5px solid transparent;

To do this for just the top and bottom of the cells, you can use:

border-bottom: 5px solid transparent;
border-top: 5px solid transparent;


.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  border: 5px solid transparent;
}
<div class="table">
  <div class="table-row">
    <div class="table-cell">Row 1 Cell 1</div>
    <div class="table-cell">Row 1 Cell 2</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Row 2 Cell 1</div>
    <div class="table-cell">Row 2 Cell 2</div>
  </div>
</div>

For Every Cell

If you want to add this to every cell in your table, you can use the border-spacing CSS property on the element set to display: table:

border-spacing: 5px;


.table {
  border-spacing: 5px;
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  background: #5ae;
  display: table-cell;
}
<div class="table">
  <div class="table-row">
    <div class="table-cell">Row 1 Cell 1</div>
    <div class="table-cell">Row 1 Cell 2</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Row 2 Cell 1</div>
    <div class="table-cell">Row 2 Cell 2</div>
  </div>
</div>

Upvotes: 13

Robert
Robert

Reputation: 20286

You could use 

border-spacing:5px;
border-collapse: separate;

http://www.w3schools.com/cssref/pr_border-spacing.asp

.table{  
    border-collapse: separate;
    border-spacing: 10px 10px;
    display:table;
}

.table .row {
  display: table-row;
}

.table .cell {
  display: table-cell;
}
<div class="table">
  <div class="row">
    <div class="cell">x</div>
    <div class="cell">x</div>
  </div>
  <div class="row">
    <div class="cell">x</div>
    <div class="cell">x</div>
  </div>
</div>

Upvotes: 4

Derrick Adkins
Derrick Adkins

Reputation: 1

All you have to do is add a margin to your rows in CSS.

tr{
margin-bottom:5px;
}

Upvotes: -4

Related Questions