How to add space between table rows with border without using border-spacing and empty rows

Question

1. I tried to use border-spacing attribute. But my table has header with multiple rows which are also affected by it. I need spaces only between rows in table body.
2. I tried to use empty rows with some height. But i also use bootstrap-table for sorting and filtering. It sorts and filters empty rows too, and i didn't find clear way to fix it, so table layout breaks after sorting or filtering.
3. Also table rows should have border.

What is the best way to create spaces between table rows with such limitations ? Table structure

<table>
<thead>
 <tr>
  <th>col1</th>
  <th>col2</th>
  <th colspan='2'>col3</th>
 </tr>
 <tr>
  <th colspan='2'></th>
  <th>col31</th>
  <th>col32</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>Abc11</td><td>Abc12</td><td>Abc13</td><td>Abc14</td>
 </tr>
 <tr><td>Abc21</td><td>Abc22</td><td>Abc23</td><td>Abc24</td>
 </tr>
</tbody>
</table>

Answer 1

Normally <tr> should have no styling, specially if it is not to be inherited by <td>s, borders and margins are an example of what <tr>s should not have.

The easiest approach to your problem is to add <div>s inside the <td>s and style them instead, you can use something like this:

HTML:

<table>
    <tr>
        <td>
            <div>santiago</div>
        </td><td>
            <div>santiago</div>
        </td><td>
            <div>santiago</div>
        </td>
    </tr><tr>
        <td>
            <div>santiago</div>
        </td><td>
            <div>santiago</div>
        </td><td>
            <div>santiago</div>
        </td>
    </tr>
</table>

CSS:

table {
    /* to eliminate the default spacing between TDs*/
    border-collapse: collapse; 
}
td {
    /* let the divs do the spacing */
    padding: 0;
}
td div {
    border-style: solid;
    border-color: black;
    border-width: 1px 0;
    /* now, here you can add the margin */
    margin-bottom: 10px;
    /* just some nice padding, you don't really need this */
    padding: 10px;
}
td:first-child div {
    /* just side borders on first and last elements */
    border-left-width: 1px;
}
td:last-child div {
    /* just side borders on first and last elements */
    border-right-width: 1px;
}

Fiddle: https://jsfiddle.net/dow267ec/

Update: if content is of different heights and you cannot add a fixed height to all the divs, you can add this simple js next to your table and you should be fine. Again, I still recommend the columns (see zurb foundation) approach, but sometimes you have to make those tables work.

document.querySelectorAll("table tr").forEach(function(tr){
    var max = 0, divs = tr.querySelectorAll("td > div");
    divs.forEach(function(div){ max = Math.max(div.offsetHeight, max); });
    // 10 is the padding that we had.
    divs.forEach(function(div){ div.style.height = (max - (2 * 10)) + "px"; });
});

Here is the updated fiddle with this js enabled. You can add an id to the table to avoid hitting other tables.

Updated fiddle : https://jsfiddle.net/dow267ec/2/

Answer 2

you could use a pseudo to draw the borders and a gradient to eventually draw a background-color for tbody td.

basic explanation in css comments

table {
  border-spacing:0;
  margin:1em;
}
th {
  padding:1em;
  width:50px;
  background:linear-gradient(to top, gray  , lightgray);
}
th , td:after{/* pseudo */
  border:1px solid;
}
td {
  text-align:center;
  background:linear-gradient(to bottom, transparent 1em, gray 1em, lightgray);/* drawn at 1em from top till bottom */
  position:relative;/* for the pseudo */
  padding:2em  1em 1em /* 1em on top will be needed here for the demo gap */
}
td:after {/* here comes the border leaving 1em gap in between trs */
  content:'';
  position:absolute;
  /* size it via coordonates */
  left:0;
  right:0;
  top:1em;/* leaves a gap of 1em at the top, do not forget to clear this space within the td with appropriate padding */
  bottom:0;
}
/* test if cols break */
td:last-of-type {
  width:70px;
}
td[class] {
  width:100px;
}
em {font-weight:bold;text-decoration:underline;font-variant:small-caps

<table>
  <thead>
    <tr>
      <th rowspan="2">Col1</th>
      <th rowspan="2">Col2</th>
      <th colspan="3">Col6</th>
      <th rowspan="2">Col7</th>
    </tr>
    <tr>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td class>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>
<p> <em>disclaimer: </em> Note this does not involved <code>td</code> spanning through rows or columns !</p>

to play with : http://codepen.io/gc-nomade/pen/dOppGJ

Answer 3

I think this is the way to do it. I'm not sure if this is what you're trying to explain.

<!DOCTYPE html>
<html>
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
            th, td {
                padding: 5px;
                text-align: left;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th rowspan="2">Col1</th>
                <th rowspan="2">Col2</th>
                <th colspan="3">Col6</th>
                <th rowspan="2">Col7</th>
            </tr>
            <tr>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
            </tr>
            <tr>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td>Row 1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td>Row 2</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>