How to add row spacing to a table?

Asked

Viewed 22,158 times

3

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

The red highlight is the distance between the lines. inserir a descrição da imagem aqui

The question is to be able to add only where I wish. The problem of the combination border-Collapse and border-Spacing: 8px is that it accepts only 2 parameters! (So, if I increase the right spacing, the left spacing 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!

html css table css-border blank-space
  • 1

    As far as I know, with border-spacing you will only achieve this result even: up and down / left and right. You can use a low size, for example, 2px. Thus, when rendered the first and last td will have an almost imperceptible spacing (the 2px), while in the middle will have a spacing of 4px (2px from above + 2px from below). I don’t know if I could explain well.

  • I understood what you meant yes. However, unfortunately, it fails to achieve the ultimate goal this. But thanks for the help!

4 answers

5


A much better solution than my previous one: use the border-spacing, and compensate for the side effects by fiddling with the table position and left edges of the cells (or right edges, 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>

4

If you accept to deal with one fixed layout, with predefined cell widths, it is possible to obtain 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>

However, this has a negative impact on the table’s semantics (as the data ends up being spread across multiple tables). It may then be the case of not using table, and yes Divs.

Unfortunately I don’t know the perfect solution.

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>

2

One option would be to use border-collapse:collapse with lower edge of the tr and color of background and desired space size. Place the background of td of the desired border color and an element within the td to create the edge 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>

Browser other questions tagged html css table css-border blank-space

You are not signed in. Login or sign up in order to post.