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


94

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?


2
Dlaczego nie rozstawianie i wypełnianie komórek?
adatapost

1
Odstępy między komórkami również zapewniają odstępy między kolumnami.
rahul

4
Odstępy między komórkami i dopełnianie komórek nie są prawidłowym (X) HTML. Nie powinieneś ich używać.
freiksenet

8
@freiksenet: Mylisz się. Są doskonale poprawnymi, ścisłymi HTML4 ( w3.org/TR/html401/struct/tables.html#h-11.2.1 ), XHTML1 ( w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ), a nawet XHTML1 .1 ( w3.org/MarkUp/DTD/xhtml-table-1.mod ).
mercator

Odpowiedzi:


215

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.


no dobra, starałem się, aby konkretna kolumna miała szerszy odstęp, więc nie pomyślałem o zastosowaniu jej do stołu
Jonathan.

4
To rozwiązanie nie pozwala na selektywne stosowanie odstępów do niektórych rzędów.
Flimm,

15
Pytanie nie wymagało tego.
John Haugeland,

To dobry pomysł, ale aby wypełnić górną lukę w pierwszym rzędzie, musiałem znaleźć obejście, które nie jest standardem, ale chyba działa. Dając thead, tbody {position: relative; top: -{border-spacing-value} }.
Farzad YZ

4
czy mogę powiedzieć, że cię kocham? o mój Boże. właśnie uratowałeś mój $$
NikosKeyz

94
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.


Czy to przetestowałeś? Wygląda na to, że td mogą mieć wypełnienie z lub bez zwinięcia. Granice działają z zapięciem, ale nie w IE.
Kobi

To zadziałało. Irytujące, że marże nie działają, ale w tym przypadku nie ma to znaczenia. Dzięki.
MGOwen

30
To naprawdę złe podejście. Modyfikujesz ramkę komórek, aby umieścić komórki, a nie tylko je pozycjonować, łącząc komórki razem, ponieważ chcesz, aby były oddzielone. Po drugie, komórki potrzebują tła, masz przerąbane. Prawidłowe podejście to oddzielenie granic, a nie zawalenie się granic, używanie separacji granic do zdefiniowania, wiesz, separacji granicy.
John Haugeland

1
To prawie pierwszy element CSS2, który został zaimplementowany, ponieważ przeglądarki miały już zaimplementowane luki w tabelach dla wersji HTML, której wszyscy używali do dokładnego rozmieszczenia pikseli. Tak, jestem pewien. :)
John Haugeland

1
To jeden z tych dziwnych zakamarków CSS, o których nie wie nikt oprócz ludzi, którzy przeczytali specyfikację. (Jest ich zaskakująco dużo. Podobnie float w zasadzie nigdy nie powinien być używany w sposób, w jaki jest używany w praktyce).
John Haugeland,

8

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.


Dlaczego głos przeciw? Inne odpowiedzi są problematyczne: odpowiedź rpflo wymaga użycia border-collapse i rozszerzenia wypełnienia komórek, sprawiając, że komórki wydają się większe, zamiast tworzyć odstępy między nimi. Odpowiedź Johna Haugelanda nie pozwala na selektywne stosowanie odstępów do niektórych rzędów. Mógłbym kontynuować, ale ta odpowiedź jest jedną z opcji, która działała w moim przypadku użycia, podczas gdy żadna z pozostałych odpowiedzi nie działała.
Flimm,

2
Podejście anonimowego użytkownika polegające na określaniu wysokości poszczególnych wierszy za pomocą CSS jest znacznie lepsze niż dodawanie fikcyjnej zawartości do tabeli, ponieważ istnieje potrzeba kontrolowania poszczególnych wierszy, a nie o to chodzi w tym pytaniu.
John Haugeland

Fałszywe wiersze mylą również narzędzia, które oczekują, że wiersze tabeli będą wierszami tabeli (takie jak ważne narzędzia ułatwień dostępu dla osób niepełnosprawnych oraz popularne wtyczki do eksportowania / sortowania / ponownego formatowania / itp.). Istnieje wiele powodów, dla których warto używać stylów do kontrolowania stylizacji zamiast wpychać fałszywe rzeczy. Przeczytaj o znacznikach semantycznych, aby uzyskać więcej informacji.
MGOwen

@MGOwen Czy mógłbyś wymienić narzędzia ułatwień dostępu, które w tym scenariuszu zawiodłyby, i jak zawiodłyby? Jestem teraz sceptyczny co do porad dotyczących dostępności, które nie wspominają o szczegółach, istnieje wiele złych porad dotyczących dostępności, które tak naprawdę nikomu nie pomagają (na przykład porady dotyczące konspektu dokumentu dla HTML 5 były złe , narzędzia ułatwień dostępu nie pracują tak, jak mówią ludzie).
Flimm

4

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 * /


2

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>

1

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

td {
 padding: 10px 0
}

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


Tworzy to dodatkową przestrzeń w wierszu tabeli. Jeśli wiersze tabeli mają kolory, które nie będą dobrze wyglądać.
Kokodoko

1

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

Jednostka może cokolwiek z tej listy:

wprowadź opis obrazu tutaj

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>


0

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>  

-1

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.


1
Nadal istnieją dobre powody, aby używać tabel (takich jak dane tabelaryczne). Masz rację, puste rzędy to z pewnością głupia trasa: P Ale jest rozwiązanie, zawalenie granic.
Ryan Florence

-1

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.


-1

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

wprowadź opis obrazu tutaj

Na przykład sprawdź skrzypce

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


Jest to uważane za złą praktykę. Jednym z powodów jest to, że narzędzia (takie jak czytniki dla niepełnosprawnych użytkowników) oczekują, że wiersze tabeli będą wierszami tabeli i będą eksportować / odczytywać / interpretować „fałszywe” wiersze zmieszane z rzeczywistymi. Zobacz, jak po raz pierwszy ta sama odpowiedź została udzielona w 2014 r. Powyżej.
MGOwen

1
@MGOwen dzięki za sugestię. całkowicie się zgodził
Jaydeep Chauhan

-4

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


3
Takie podejście zapobiega automatycznemu wyrównywaniu kolumn, gdy komórki zawierają dane o różnych wymiarach - oznaczanie tabeli jest zasadniczo bezcelowe. W przedstawionych przykładach działa wystarczająco dobrze, ale nie jest to zalecana technika. Zmień tekst komórki, aby zobaczyć, co mam na myśli.
werizm

Hej @verism, przepraszam, ale nie rozumiem. Czy możesz to trochę bardziej wyjaśnić? Lub jeśli możesz zapewnić skrzypce, w których ta metoda zawodzi, ponieważ używam tej metody intensywnie i chciałbym zająć się scenariuszami, w których zawodzi.
Sandeep Choudhary

Nie ma wyraźnego wytyczenia kolumn; co oznacza, że ​​dane tabelaryczne tracą swoją wizualną strukturę i stają się trudniejsze do odczytania. jsfiddle.net/verism/zshmN/5
verism

@verism ya to jeden problem, ale możemy zdefiniować kolumny o stałej szerokości. Wiem, że to nie jest dobre rozwiązanie, ale nie znalazłem innego rozwiązania, które działa na IE9
Sandeep Choudhary

1
Pływające wiersze tabeli są niezgodne ze specyfikacją CSS. Sekcja 17 CSS2 wymaga, aby elementy display: table-row znajdowały się w obrębie elementów display: table-row-group, -header-group lub -footer-group. Jednak algorytm pływający zgodnie z sekcją 9 wprowadza anonimowego rodzica bloku. Oznacza to, że wiersz tabeli nie ma już zgodnego z prawem układu nadrzędnego, a przeglądarka zgaduje, co zrobić. To jest całkowicie błędne.
John Haugeland,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.