Odstęp między dwoma rzędami w tabeli?

Czy jest to możliwe za pomocą CSS?

Próbuję

tr.classname {
  border-spacing: 5em;
}

bez skutku. Może robię coś złego?

Musisz użyć paddingu na swoich tdelementach. Coś takiego powinno załatwić sprawę. Możesz oczywiście uzyskać ten sam wynik, stosując górne wypełnienie zamiast dolnego wypełnienia.

W poniższym kodzie CSS znak „więcej niż” oznacza, że ​​dopełnienie jest stosowane tylko do tdelementów, które są bezpośrednimi trelementami potomnymi elementów z klasą spaceUnder. Umożliwi to użycie zagnieżdżonych tabel. (Komórki C i D w przykładowym kodzie.) Nie jestem zbyt pewny obsługi przeglądarki dla bezpośredniego selektora potomnego (myślę o IE 6), ale nie powinien on łamać kodu w żadnych współczesnych przeglądarkach.

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Powinno to wyglądać mniej więcej tak:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

W tabeli nadrzędnej spróbuj ustawić

border-collapse:separate; 
border-spacing:5em;

Plus deklaracja graniczna i sprawdź, czy osiągnie to pożądany efekt. Uważaj jednak, że IE nie obsługuje modelu „oddzielnych granic”.

Masz tabelę z albumami id z dowolnymi danymi ... Pominąłem trs i tds

<table id="albums" cellspacing="0">       
</table>

W css:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

ponieważ mam za sobą obraz tła, fałszowanie go białą wyściółką nie działałoby. Zdecydowałem się umieścić pusty wiersz między każdym wierszem treści:

<tr class="spacer"><td></td></tr>

następnie użyj css, aby nadać wierszom dystansowym określoną wysokość i przezroczyste tło.

Z sieci deweloperów Mozilla :

Właściwość CSS z odstępami między krawędziami określa odległość między granicami sąsiednich komórek (tylko dla modelu oddzielonych granic). Jest to równoważne atrybutowi odstępu między komórkami w prezentacji HTML, ale opcjonalnej drugiej wartości można użyć do ustawienia różnych odstępów poziomych i pionowych.

Ta ostatnia część jest często nadzorowana. Przykład:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

AKTUALIZACJA

Rozumiem teraz, że OP chce, aby określone, oddzielne rzędy miały większy odstęp. Dodałem konfigurację z tbodyelementami, które to osiągają bez rujnowania semantyki. Nie jestem jednak pewien, czy jest obsługiwany we wszystkich przeglądarkach. Zrobiłem to w Chrome.

Poniższy przykład pokazuje, jak możesz wyglądać, jakby istniała tabela oddzielnych wierszy z pełną słodyczą css. Dało także więcej odstępów w pierwszym rzędzie dzięki tbodykonfiguracji. Zapraszam do użycia!

Informacja o wsparciu: IE8 +, Chrome, Firefox, Safari, Opera 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Możesz spróbować dodać wiersz separatora:

HTML:

<tr class="separator" />

css:

table tr.separator { height: 10px; }

Nie można zmienić marginesu komórki tabeli. Ale MOŻESZ zmienić wypełnienie. Zmień dopełnienie TD, co spowoduje powiększenie komórki i odepchnij tekst z boku przy zwiększonym dopełnieniu. Jeśli masz linie graniczne, nadal nie będzie to dokładnie to, czego chcesz.

Spójrz na zwinięcie ramki: oddzielny atrybut (domyślnie) i właściwość odstępu między ramkami.

Najpierw musisz oddzielić je za pomocą zwinięcia obramowania , a następnie możesz zdefiniować przestrzeń między kolumnami i wierszami za pomocą odstępów między ramkami .

Obie te właściwości CSS są właściwie dobrze obsługiwane w każdej przeglądarce, patrz tutaj .

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Ok, możesz

tr.classname td {background-color:red; border-bottom: 5em solid white}

Upewnij się, że kolor tła jest ustawiony na td zamiast na wierszu. Powinno to działać w większości przeglądarek ... (Chrome, tj. Przetestowane pod kątem ff)

Musisz ustawić border-collapse: separate;na stole; większość domyślnych arkuszy stylów przeglądarki zaczyna się od border-collapse: collapse;, która wykopuje odstępy między krawędziami.

Ponadto odstępy między krawędziami: są włączane TD, a nie TR.

Próbować:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Możesz użyć wysokości linii w tabeli:

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

Zbyt późna odpowiedź :)

Jeśli zastosujesz trelement pływający do elementów, możesz odstępować między dwoma wierszami za pomocą marginatrybutu.

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Aby stworzyć iluzję odstępów między rzędami, zastosuj kolor tła do rzędu, a następnie utwórz grubą ramkę z białym kolorem, aby utworzyć „przestrzeń” :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Prawidłowym sposobem na podanie odstępów dla tabel jest użycie podkładki i odstępów między komórkami np

<table cellpadding="4">

Natknąłem się na to, walcząc z podobnym problemem. Uważam, że odpowiedź Varuna Natryaja jest dość pomocna, ale zamiast tego użyłbym przezroczystej ramki.

td { border: 1em solid transparent; }

Przezroczyste obramowania nadal mają szerokość.

Działa z większością najnowszych przeglądarek w 2015 roku. Proste rozwiązanie. Nie działa dla przezroczystości, ale w przeciwieństwie do odpowiedzi Thoronwen, nie mogę uzyskać przezroczystości do renderowania przy dowolnym rozmiarze.

    tr {
      border-bottom:5em solid white;
    }

Po prostu włóż divdo tdi ustaw następujące style div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Zdaję sobie sprawę, że jest to odpowiedź na stary wątek i może nie być to żądane rozwiązanie, ale chociaż wszystkie sugerowane rozwiązania nie spełniły moich oczekiwań, to rozwiązanie dla mnie zadziałało.

Miałem 2 komórki tabeli, jedną z kolorem tła, drugą z kolorem obramowania. Powyższe rozwiązania usuwają ramkę, więc komórka po prawej stronie wydaje się unosić w powietrzu. Rozwiązanie, które wystarczyły było zastąpić table, tra tdz div i odpowiednich klas: stół byłoby div id="table_replacer", tr byłoby div class="tr_replacer"i td byłoby div class="td_replacer"(zmiana zamykania znaczniki div, a także oczywiście)

Aby uzyskać rozwiązanie mojego problemu, css to:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

Mam nadzieję, że to komuś pomoże.

Możesz wypełnić elementy <td /> elementami <div /> i zastosować dowolny margines do tych div, które lubisz. Aby uzyskać wizualną przestrzeń między rzędami, możesz użyć powtarzającego się obrazu tła na elemencie <tr />. (To było rozwiązanie, którego właśnie użyłem dzisiaj i wydaje się, że działa zarówno w IE6, jak i FireFox 3, chociaż nie testowałem go dalej.)

Ponadto, jeśli nie chcesz modyfikować kodu serwera, aby umieścić <div /> s wewnątrz <td /> s, możesz użyć jQuery (lub czegoś podobnego), aby dynamicznie zawinąć zawartość <td /> w <div / >, umożliwiając stosowanie CSS według potrzeb.

Lub po prostu dodaj puste miejsce z wysokością marginesu między wierszami, które chcesz dodać odstępy

Oto proste i eleganckie rozwiązanie z kilkoma zastrzeżeniami:

• Nie można tak naprawdę zrobić przezroczystości, musisz nadać im określony kolor.
• Nie można zaokrąglać rogów granic powyżej i poniżej luk
• Musisz znać wypełnienie i obramowanie komórek tabeli

Mając to na uwadze, spróbuj tego:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

W rzeczywistości robisz naklejanie prostokąta ::before bloku na górę wszystkich komórek w rzędzie, który chcesz poprzedzić przerwą. Bloki te wystają nieco z komórek, aby pokryć istniejące granice, ukrywając je. Te bloki są tylko górną i dolną ramką połączonymi ze sobą: górna ramka tworzy szczelinę, a dolna ramka ponownie tworzy wygląd oryginalnej górnej ramki komórek.

Zauważ, że jeśli masz obramowanie wokół samej tabeli, a także komórek, musisz dodatkowo zwiększyć poziomo-margines „bloków”. Tak więc dla obramowania tabeli 4px zamiast tego użyjesz:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

A jeśli border-collapse:separatezamiast tego używana jest tabela border-collapse:collapse, musisz (a) użyć pełnej szerokości obramowania tabeli:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... a także (b) zastąp podwójną szerokość obramowania, która teraz musi pojawić się poniżej odstępu:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

Technikę można łatwo dostosować do wersji .gapafter, jeśli wolisz, lub do tworzenia szczelin pionowych (kolumnowych) zamiast szczelin rzędów.

Oto codepen, w którym można go zobaczyć w akcji: https://codepen.io/anon/pen/agqPpW

Tutaj działa to płynnie:

#myOwnTable td { padding: 6px 0 6px 0;}

Przypuszczam, że możesz wypracować bardziej szczegółowy układ, określając, które td w razie potrzeby.

robienie tego pokazanego powyżej ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

usuwa pionowe wyrównanie kolumn, więc należy zachować ostrożność podczas jego używania

Czy próbowałeś:

tr.classname { margin-bottom:5em; }

Alternatywnie, każdy td może być również regulowany:

td.classname { margin-bottom:5em; }

lub

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