How to add spacing in the rows of a table?

Question

How to add spacing in the rows of a table?

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (3 votes)
#4 by (1 votes)

2

I need to draw a table with the following characteristic: Each line has a margin-bottom of 8px .

The highlight in red is the distance between the lines.

The point is to be able to add only where I want. The problem of the border-collapse: separate and border-spacing: 8px combination is that it only accepts 2 parameters! (So if I increase the spacing on the right, the one on the left also increases, and if I add spacing above, automatically down also it adds.) And ideally you could just manipulate one of these directions!

Thank you!

html css

asked by anonymous 05.03.2015 / 21:29

4 answers

3

If you agree to deal with a fixed layout , with cell widths you can get 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 being spread across multiple tables). It may then be the case not to use table, but divs.

Unfortunately, I do not know the perfect solution.

05.03.2015 / 22:29

3

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

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>

05.03.2015 / 23:32

1

One option would be to use border-collapse:collapse with lower border of tr and color of background and size of space you want. Put the% w / o% of the% w / o of the desired border color and an element within% w / o to create the border illusion, see 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>

06.03.2015 / 14:05

Transparent gradient overlapping div without losing the "click" Retrieve MAX value from an SQL column

score 4 · Accepted Answer

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 right, anyway):

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>