Jak umieścić odstępy między elementami TBODY

Mam taki stół:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Chciałbym umieścić odstępy między każdym elementem tbody, ale dopełnienie i marginesy nie mają wpływu. Jakieś pomysły?

Spróbuj tego, jeśli nie masz nic przeciwko temu, by nie mieć granic.

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Coś takiego zadziała, w zależności od wymagań dotyczących obsługi przeglądarki:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

Ludzie zawsze będą mieć kontrowersyjne opinie na temat używania pustych elementów tabeli do układu strony (o czym świadczy negatywna opinia). Rozumiem to, ale czasami łatwiej jest z nich korzystać w ten sposób, gdy pracujesz w „ szybki i brudny ” sposób.

Używałem pustych wierszy w poprzednich projektach, aby rozmieścić grupy wierszy tabeli. Przypisałem odstępom wierszom własną klasę css i zdefiniowałem wysokość dla tej klasy, która działała jako górny i dolny margines dla tej grupy wierszy tabeli.

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

Jeśli nie masz obramowań na komórkach tabeli, możesz również zdefiniować wysokość typowej komórki lub wiersza w arkuszu stylów, aby równomiernie rozdzielić wszystkie wiersze tabeli.

tr{
   height: 40px;
}

Miałem problem z poprawnym rozstawieniem wielu <tbody>z ::beforepseudo, w obecności <tr>zawierania <td>z rowspan w kilku przeglądarkach.

Zasadniczo, jeśli masz taką <tbody>strukturę:

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

I obserwujesz, kto radzi pisać css na ::beforepseudo elemencie w ten sposób:

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

Wpłynie to na rozpiętość wierszy, sprawiając, że tabela „traci” w ciągu sekundy <tr>liczbę <td>-rowspan obecnych w pierwszej.

Jeśli więc ktoś napotka taki problem, rozwiązaniem jest stylizacja ::beforepseudo w następujący sposób:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

Oto skrzypce

Oto kolejna możliwość, która polega na: first-child, która nie jest dostępna we wszystkich przeglądarkach:

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Po prostu ustaw displayjako blocki będzie działać.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

Ze wszystkich odpowiedzi udzielonych powyżej, tylko odpowiedzi djensona47 zachowują oddzielenie prezentacji i treści . Wadą metody modelu zwiniętego obramowania jest to, że nie można już używać atrybutów obramowania tabeli lub odstępów między komórkami do oddzielania poszczególnych komórek. Możesz argumentować, że to dobra rzecz i istnieją pewne obejścia, ale może to być uciążliwe. Myślę więc, że metoda pierwszego dziecka jest najbardziej elegancka.

Alternatywnie możesz również ustawić właściwość przepełnienia klasy TBODY na wartość inną niż „widoczne”. Ta metoda pozwala również zachować model oddzielnych granic:

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Ponieważ do TD można zastosować dopełnienie, możesz zrobić sztuczkę ze znakiem +. Wtedy będzie możliwe nadanie górnego wypełnienia TD's pierwszego TR z ciała:

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

Dodałem „tbody + tbody”, więc pierwsze ciało nie będzie miało górnego wypełnienia. Jednak nie jest to wymagane.

O ile wiem nie ma żadnych wad :), choć nie testowałem starszych przeglądarek.

Możesz użyć border-spacingw tabeli z grupami wierszy tabeli, aby dodać spację między tymi grupami. Chociaż nie sądzę, aby można było określić, które grupy są rozmieszczone, a które nie.

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

NOWA ODPOWIEDŹ

Możesz użyć <tbody>dowolnej liczby tagów. Do tej pory nie zdawałem sobie sprawy, że W3C jest w porządku. Nie znaczy to, że moje poniższe rozwiązanie nie działa (działa), ale aby zrobić to, co próbujesz zrobić, przypisz <tbody>klasy tagów, a następnie odwołaj się do ich poszczególnych <td>tagów za pomocą CSS w następujący sposób:

table tbody.yourClass td {
    padding: 10px;
}

a więc twój HTML:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Wypróbuj tego gościa :)

STARA ODPOWIEDŹ

cokolwiek robisz, NIE wstawiaj pustych wierszy ...

nie powinieneś mieć więcej niż 1 element tbody w swojej tabeli. co możesz zrobić, to ustawić atrybut class lub id w swoich <tr>elementach i <td>uzupełnić odpowiednie tagi:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Możesz nawet przypisać górną i dolną <tr>dodatkową klasę, tak aby wykonywały odpowiednio tylko górne lub dolne wypełnienie:

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

a w kodzie HTML <tr>tag wyglądałby tak:

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

Mam nadzieję że to pomoże!

Odpowiedź djensen47 działa świetnie w nowszych przeglądarkach, jednak, jak wskazano, w IE7 nie działa.

Moim obejściem tego problemu w celu obsługi starszych przeglądarek było zawijanie zawartości każdej komórki do elementu div. Następnie dodaj górną część marginesu do elementu div.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

Ustawienie wysokości utrzymuje komórki o wysokości co najmniej 30 pikseli, aby zapobiec zawijaniu się kolorów komórek w elemencie div wokół tekstu. Górny margines tworzy żądaną przestrzeń, zwiększając cały rząd.

Przeszedłem przez to, próbując rozwiązać go samodzielnie. Udało mi się umieścić <br>tag tuż przed </tbody>tagiem zamykającym . Jest to poprawka czysto wizualna, ale wydaje się, że działa w większości testowanych przeglądarek.

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

Powinien być również dostępny.

Z uznaniem dla wszystkich, którzy odpowiedzieli jako pierwsi ...

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 50%;
}
tbody:before {
  content: "";
  display:block;
  border-top: 15px solid white;
}
tbody tr {
  border-color: #000;
  border-style: solid;
}
tbody tr:first-of-type{
  border-width: 2px 2px 0 2px;
}
tbody tr:nth-of-type(1n+2){
  border-width: 0 2px 0 2px;
}
tbody tr:last-of-type{
  border-width: 0 2px 2px 2px;
}
tbody tr:nth-child(odd) {
  background-color: #ccc;
}
tbody tr:hover {
  background-color: #eee;
}
td {
  text-align: right;
}

<table>
  <tbody>
    <tr>
      <th colspan="3">One</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Two</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>