How to add row spacing in a table?

I need to draw a table with the following characteristic: that each row has a margin-bottom of 8px .

The Highlight in red is the distance one should have between the lines. insert the description of the image here

The question is to be able to add only where I want. The problem with the combination border-collapse: separate and border-spacing: 8px is that it only accepts 2 parameters! (So if I increase the spacing from the right, the left also increases, and if I add spacing above, automatically below it also adds.) And the ideal would be to be able to manipulate only one of these directions!

Thank you!

 3
Author: PauloBoaventura, 2015-03-05
Source

4 answers

A much better solution than my previous one: use border-spacing, and compensate for the side effects by moving the table position and the left edges of the cells (or the right ones, whatever): 

div {
  border: 1px solid red;
}

table {
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: -8px;
}

td {
  border: 1px solid green;
  border-left-width: 0;
  min-width: 120px;
  height: 18px;
}

td:first-child {
  border-left-width: 1px;
}
<div>
  <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </table>
</div>
 5
Author: bfavaretto, 2015-03-06 13:31:58

If you accept to handle a fixed layout , with predefined cell widths, you can achieve this visual result by stacking two tables: 

table {
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 6px;
}

td {
    border: 1px solid green;
    min-width: 120px;
    height: 18px;
}
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

But this has a negative impact on the semantics of the table (since the data ends up scattered across multiple tables). It may then be the case of not using table, but divs.

Unfortunately I do not know perfect solution.

 4
Author: bfavaretto, 2015-03-05 21:29:36

A solution put a" separator " of rows....

td{
  border:1px solid #000000;
  }
table tr[class=separar]{
  display:block;
  margin-bottom:8px;
  }
<table cellspacing="0" cellpadding="0">
  <tr>
    <td>Dados</td>
    <td>Dados</td>
  </tr>
  <tr class="separar"></tr>
  <tr>
    <td>Dados</td>
    <td>Dados</td>
  </tr>
</table>
 3
Author: Matheus Cristian, 2015-03-05 22:39:21

One option would be to use border-collapse:collapse with bottom border of tr and color of background and desired space size. Put the background of the desired border color and an element inside the td to create the border illusion, see better in the example below: 

table{
    width: 100%;
    border-collapse:collapse;
}
table tr {
    border-bottom: solid white 8px; /*Distancia entre tr*/
}
table tr td {
    background-color:green;  /*Cor para criar ilusão de borda*/
}
table tr td:not(:last-child) {
    padding: 1px 0 1px 1px; /*Retirar padding a direita da td, exceto da última para não criar colapso de bordas*/
}
table tr td span {
    display:block;
    background-color:white;
    padding:5px 5px 0 5px;
}
table tr:nth-child(even) td span {
    background-color:#ccc; /*Se desejar alternar cores das linhas*/
}
<table>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
</table>
 2
Author: abfurlan, 2015-03-06 13:13:30