Space between CSS Table Rows

Question

I have a css table and am trying to make a space between each row, the gap should have no color. I have tried a few things that have not worked such as:

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

and

border-collapse: collapse;

The code is below along with a jsfiddle.

Thanks.

HTML

<div class="live-mu-table" >
    <div class="live-mu-table-tr">
        <div class="live-mu-table-tdq" id="a-1">q1</div>
        <div class="live-mu-table-tdspacer1"></div>
        <div class="live-mu-table-tda" id="a-3">A3</div>
    </div>

    <div class="live-mu-table-tr">
        <div class="live-mu-table-tdq" id="q-2">q2</div>
        <div class="live-mu-table-tdspacer1"></div>
        <div class="live-mu-table-tda" id="a-1">A1</div>
    </div>

    <div class="live-mu-table-tr">
        <div class="live-mu-table-tdq" id="q-3">q3</div>
        <div class="live-mu-table-tdspacer1"></div>
        <div class="live-mu-table-tda" id="a-2">A2</div>
    </div>
</div>

CSS

.live-mu-table{
 display: table;
 background-color:Azure;
 margin-bottom: 5px;
 padding-bottom: 5px;
 position:relative;
 margin-left: auto;
 margin-right: auto;    
 width:75%;
// border-collapse: collapse;
}
.live-mu-table-tr{
    display: table-row; 
    height:30px;
}
.live-mu-table-tdq{
   display: table-cell;
  border:1px solid #000;
    width:60%;
    text-align:center;
   vertical-align:middle;   
   cursor: pointer; 
}

.live-mu-table-tda{
   display: table-cell;
    border:1px solid #000;
    width:30%;
    text-align:center;
   vertical-align:middle;
cursor: pointer;   
}

.live-mu-table-tdspacer1{
   display: table-cell;
    border:1px solid #000;
    width:10%;
    text-align:center;
   vertical-align:middle;   
}

Why are you using divs and then css to create tables? Anyway there's attribute called border-spacing that is maybe what you want. https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing — Paran0a, Jan 28 '16 at 11:52
you want to keep each border? for istance you want each cell with borders but add a space between each row with no color? — Lorenzo, Jan 28 '16 at 11:53
Possible duplicate of [CSS: how do I create a gap between rows in a table?](http://stackoverflow.com/questions/1264187/css-how-do-i-create-a-gap-between-rows-in-a-table) — Venugopal, Jan 28 '16 at 11:58
you're using `display:table;` to make spacing between row add `border-spacing : 0 5px;` to the `.live-mu-table Class` — Bourbia Brahim, Jan 28 '16 at 12:04
I am using divs and css because I seem to have much more control over spacing. I want each row to have a border, then a gap, then the next row. — user1763812, Jan 28 '16 at 12:07
I looked at the duplicate question digested. Unfortunately it did not help me. — user1763812, Jan 28 '16 at 12:08
@user1763812 By the way, you don't have more features (like "control over spacing") with divs than you have with tables. You can use the same CSS on both. And in fact, tables are more powerful, with attributes like colspan and rowspan that divs don't have, etc. — Mr Lister, Jan 28 '16 at 13:41
@user1763812 OK. I once wrote up [an answer](http://stackoverflow.com/a/33100775/1016716) detailing all the differences between HTML tables and CSS tables. Hope this helps. — Mr Lister, Jan 30 '16 at 07:46

Mr Lister · Accepted Answer · 2016-01-28T16:20:34.567

Use border-spacing to create the spacing.

And if you want the gaps to have no background color, move the background-color from the table to the table-rows.

.live-mu-table {
  display: table;
  margin-bottom: 5px;
  padding-bottom: 5px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  border-spacing: 0 3px;     /* new */
}
.live-mu-table-tr {
  display: table-row;
  height: 30px;
  background-color: Azure;   /* moved */
}
.live-mu-table-tdq {
  display: table-cell;
  border: 1px solid #000;
  width: 60%;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.live-mu-table-tda {
  display: table-cell;
  border: 1px solid #000;
  width: 30%;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.live-mu-table-tdspacer1 {
  display: table-cell;
  border: 1px solid #000;
  width: 10%;
  text-align: center;
  vertical-align: middle;
}

<div class="live-mu-table">
  <div class="live-mu-table-tr">
    <div class="live-mu-table-tdq" id="a-1">q1</div>
    <div class="live-mu-table-tdspacer1"></div>
    <div class="live-mu-table-tda" id="a-3">A3</div>
  </div>

  <div class="live-mu-table-tr">
    <div class="live-mu-table-tdq" id="q-2">q2</div>
    <div class="live-mu-table-tdspacer1"></div>
    <div class="live-mu-table-tda" id="a-1-2">A1</div>
  </div>

  <div class="live-mu-table-tr">
    <div class="live-mu-table-tdq" id="q-3">q3</div>
    <div class="live-mu-table-tdspacer1"></div>
    <div class="live-mu-table-tda" id="a-2">A2</div>
  </div>
</div>

Space between CSS Table Rows

1 Answers1

Linked