CSS: jak utworzyć lukę między wierszami w tabeli?

Oznacza to, że wynikowa tabela wygląda mniej tak:

[=== WIERSZ ===]
[=== WIERSZ ===]
[=== WIERSZ ===]
[=== WIERSZ ===]

... i więcej w ten sposób:

[=== WIERSZ ===]

[=== WIERSZ ===]

[=== WIERSZ ===]

[=== WIERSZ ===]

Próbowałem dodać

margin-bottom:1em;

do obu td i tr, ale nic nie dostałem. Jakieś pomysły?

Wszystko czego potrzebujesz:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

Zakłada się, że chcesz mieć pionową przerwę 1em, a nie poziomą. Jeśli to robisz, prawdopodobnie powinieneś również przyjrzeć się kontroli wysokości linii.

To trochę dziwne, że niektóre z udzielonych przez ludzi odpowiedzi dotyczą zawalenia granicy: zawalenia się, którego efekt jest dokładnym przeciwieństwem tego, o co zadawano pytanie.

table {
    border-collapse: collapse;
}

td {
    padding-top: .5em;
    padding-bottom: .5em;
}

Komórki nie będą reagować na nic, chyba że najpierw ustawisz zawijanie obramowania. Możesz także dodać obramowania do elementów TR po ustawieniu (między innymi).

Jeśli to dotyczy układu, przeniósłbym się do używania DIV i bardziej aktualnych technik układu, ale jeśli są to dane tabelaryczne, daj sobie spokój. Nadal intensywnie wykorzystuję tabele w moich aplikacjach internetowych do gromadzenia danych.

Jeśli żadna z pozostałych odpowiedzi nie jest zadowalająca, zawsze możesz po prostu utworzyć pusty wiersz i odpowiednio nadać mu styl za pomocą CSS, aby był przezroczysty.

Jeśli nie masz obramowań lub masz obramowania i chcesz zachować odstępy wewnątrz komórek, możesz użyć paddinglub line-height. O ile wiem, margines nie ma wpływu na komórki i wiersze.
Właściwość CSS dotycząca odstępów między komórkami to border-spacing, ale nie działa w IE6 / 7 (więc możesz jej używać w zależności od tłumu).

Jeśli wszystko inne zawiedzie, możesz użyć starego cellspacingatrybutu w swoim znaczniku - ale da to również odstępy między kolumnami. Niektóre zresetowanie CSS sugeruje, że powinieneś ustawić to mimo wszystko, aby uzyskać obsługę wielu przeglądarek:

/ * tabele nadal wymagają cellspacing="0"znaczników * /

Oto sposób (myślałem, że to niemożliwe):

Najpierw nadaj tabeli tylko pionowe odstępy między obramowaniem (na przykład 5 pikseli) i ustaw jego poziome odstępy między krawędziami na 0. Następnie należy nadać odpowiednie obramowanie każdej komórce wiersza. Na przykład skrajna prawa komórka w każdym wierszu powinna mieć obramowanie na górze, na dole i po prawej stronie. Komórki po lewej stronie powinny mieć obramowanie na górze, na dole i po lewej stronie. Pozostałe komórki między tymi dwoma powinny mieć obramowanie tylko na górze i na dole. Jak ten przykład:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

Moim zdaniem najłatwiejszym sposobem jest dodanie dopełnienia do tagu.

td {
 padding: 10px 0
}

Mam nadzieję, że to ci pomoże! Dopingować!

Po prostu możesz użyć padding-topi padding-bottomna tdelemencie.

Jednostka może cokolwiek z tej listy:

Kod demonstracyjny:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

dopełnienie w TD działa, jeśli chcesz, aby przestrzeń miała ten sam kolor tła co td

w moim przypadku wymaganiem było białe miejsce między wierszem nagłówka a tym, co było nad nim

stosując tę ​​stylizację do pojedynczej komórki, udało mi się uzyskać pożądaną separację. Nie było potrzeby dodawania go do wszystkich komórek ... Prawdopodobnie nie NAJBARDZIEJ eleganckie, ale prawdopodobnie bardziej eleganckie niż rzędy separatorów.

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

Jeśli będziesz trzymać się projektu przy użyciu tabel, najlepszym pomysłem będzie podanie pustego wiersza bez zawartości i określonej wysokości między poszczególnymi wierszami w tabeli.

Możesz użyć div, aby uniknąć tej złożoności. Po prostu podaj margines dla każdego elementu div.

Możesz także po prostu zmodyfikować wysokość każdego wiersza za pomocą CSS.

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

Możesz również zmodyfikować wysokość <td>elementu, powinno to dać ten sam wynik.

Utwórz kolejny <tr>tuż poniżej i dodaj trochę miejsca lub wysokości do zawartości<td>

Na przykład sprawdź skrzypce

https://jsfiddle.net/jd_dev777/wx63norf/9/

Dodaj następującą regułę do tr i powinno działać

float: left

Przykład (otwórz go w IE9 offcourse :)): http://jsfiddle.net/zshmN/

EDYCJA: To nie jest legalne ani poprawne rozwiązanie, jak wskazuje wielu, ale jeśli nie masz opcji i potrzebujesz czegoś, to zadziała w IE9.

Zatem wszyscy, którzy oddają głosy, poinformuj nas również o właściwym rozwiązaniu