Spacing between tbodys

Question

Spacing between tbodys

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a list table of items with groups of lines (tbody) and I would like to add spacing between them, not that I have not already done so, but I have been looking for a "less gambiarra"

I'd also like to better style the table edges while I get the spacing. The following is an example of the table:

Example

table { text-align:left; border-collapse:separate; border-spacing:0; }

table tbody { border-spacing:0 10px; } /* apenas ilustrativo */

table tbody td { vertical-align:middle; border-top:1px solid #000; }
table tbody:nth-child(odd) { background-color:#ccc; }

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>th1</th>
      <th>th2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">1</td>
      <td>Teste</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td colspan="2">Algum conteúdo</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">2</td>
      <td>Teste</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td colspan="2">Algum conteúdo</td>
    </tr>
  </tbody>
</table>

For those who have never seen a table with multiple gt ;, here's a good request: link

html css table

asked by anonymous 17.04.2016 / 21:13

2 answers

Importing backup of sql server from another server Dealing with compressed files in PHP

score 1 · Answer 1

1

Set a width for the table to a float: left and a margin-bottom for the tbody.

18.04.2016 / 07:29

score 0 · Answer 2

Spacing

To give the space, just assign the padding to give an internal space

table tbody { padding: 10px; }

Edge Style

table { 
    border-radius: 4px;
    box-shadow: 0 0 15px #CCC;
    border: 1px solid #777;
    transition: 0.3s;
}

table:hover { 
    box-shadow: 0 0 15px #999;
}