Czy ustawić CSS i odstępy między komórkami w CSS?


3316

W tabeli HTML, cellpaddingi cellspacingmogą być ustawione tak:

<table cellspacing="1" cellpadding="1">

Jak można to zrobić za pomocą CSS?


6
Po prostu ogólna sugestia, przed wypróbowaniem tych rozwiązań sprawdź, czy twój style.css „resetuje” twoje stoły. Przykład: Jeśli nie ma stołów ustawionych width:autowtedy border-collapsemoże nie działać zgodnie z oczekiwaniami.
PJ Brunet,

1
Użyj odstępów między krawędziami na stole i wypełnienia na td.
Anubhav

Odpowiedzi:


3554

Podstawy

Do kontrolowania „paddingu” w CSS, możesz po prostu użyć paddingna komórkach tabeli. Np. Dla 10px „cellpadding”:

td { 
    padding: 10px;
}

W przypadku „odstępu między komórkami” możesz zastosować border-spacingwłaściwość CSS do swojej tabeli. Np. Dla 10 pikseli „odstępu między komórkami”:

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

Ta właściwość pozwoli nawet na oddzielne poziome i pionowe odstępy, czego nie można zrobić w oldschoolowym „odstępie komórek”.

Problemy w IE <= 7

Będzie to działać w prawie wszystkich popularnych przeglądarkach, z wyjątkiem przeglądarki Internet Explorer w wersji Internet Explorer 7, w której prawie nie masz szczęścia. Mówię „prawie”, ponieważ przeglądarki te nadal obsługują border-collapsewłaściwość, która łączy granice sąsiadujących komórek tabeli. Jeśli próbujesz wyeliminować odstępy między komórkami (to znaczy cellspacing="0"), border-collapse:collapsepowinien mieć ten sam efekt: brak spacji między komórkami tabeli. Ta obsługa jest jednak błędna, ponieważ nie zastępuje istniejącego cellspacingatrybutu HTML elementu tabeli.

W skrócie: w przypadku przeglądarek innych niż Internet Explorer 5-7 border-spacingobsługuje cię. W przypadku programu Internet Explorer, jeśli Twoja sytuacja jest w porządku (chcesz mieć 0 komórek, a twoja tabela nie ma jeszcze zdefiniowanej definicji), możesz użyć border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Uwaga: świetny przegląd właściwości CSS, które można zastosować do tabel i dla których przeglądarek, znajduje się na tej fantastycznej stronie Quirksmode .


27
cellpadding = „0” nadal może mieć znaczenie w Chrome 13.0.782.215, nawet jeśli zwinięcie ramki: zwinięcie i odstępy między krawędziami zostaną zastosowane do tabeli.
Whitneyland,

7
@LeeWhitney musisz ustawić dopełnianie: 0 w komórkach tabeli.
Martin Ørding-Thomsen

7
To trochę nie na temat, ale atrybuty padania komórek i odstępów między komórkami są usuwane w HTML5, więc CSS jest teraz jedyną drogą do przejścia.
Ignas2526,

12
Cześć wszystkim. Zaktualizowałem odpowiedź w celu zwiększenia przejrzystości, w tym w sekcji na temat podkładek na komórki, co moim zdaniem było oczywiste (wystarczy użyć „wypełnienia”). Mam nadzieję, że teraz jest to bardziej przydatne.
Eric Nguyen,

4
To prawda, @vapcguy, w każdej z nieskończenie zmiennych innych sytuacji, w których stylizujesz tabelę, musisz zdefiniować bardziej szczegółowe selektory. Powyższe są oznaczone jako przykłady.
Eric Nguyen,

942

Domyślna

Domyślne zachowanie przeglądarki jest równoważne z:

table {border-collapse: collapse;}
td    {padding: 0px;}

         Wpisz opis zdjęcia tutaj

Podkładka na telefon

Ustawia przestrzeń między zawartością komórki a ścianą komórki

table {border-collapse: collapse;}
td    {padding: 6px;}

        Wpisz opis zdjęcia tutaj

Odstępy między komórkami

Kontroluje przestrzeń między komórkami tabeli

table {border-spacing: 2px;}
td    {padding: 0px;}

        Wpisz opis zdjęcia tutaj

Obie

table {border-spacing: 2px;}
td    {padding: 6px;}

        Wpisz opis zdjęcia tutaj

Oba (specjalne)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

        Wpisz opis zdjęcia tutaj

Uwaga: Jeśli jest border-spacingustawiony, oznacza to, że border-collapsewłaściwość tabeli to separate.

Spróbuj sam!

Tutaj możesz znaleźć stary sposób HTML na osiągnięcie tego celu.


1
Jak znikają odstępy wokół stołu? Kiedy ustawię „odstępy między ramkami: 8px 12px, dodaje odstępy nie tylko między, ale między obramowaniem tabeli a komórkami zewnętrznymi! Ale nie jest to pokazane na zdjęciach tutaj; są one pozostawione równo.
Kaz

1
@ 2astalavista I niestety, jeśli ktoś chce usunąć efekt zewnętrznych odstępów, nie zadziała w ten sposób z tymi atrybutami CSS.
Kaz

@Kaz Może być konieczne użycie ujemnego marginesu, aby ukryć tę irytującą część.

2
Domyślne wypełnienie na TD to zazwyczaj 1px, a nie 0
Jan M

341
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

2
To właściwie jedyna rzecz, którą mogłem dla mnie zabrać do pracy, chociaż zastosowałem te informacje do identyfikatora, aby uniknąć nadmiernej ogólności.
Kzqai

20
To jest cellspacing=0równoważne. Odpowiednik dla cellspacing=1jest zupełnie inny. Zobacz zaakceptowaną odpowiedź.
TRiG,

3
Nie powinien table tdi powinien table thbyć tdi thodpowiednio? Działa to w obie strony, ale mniejszy selektor oznacza nieco szybsze dopasowanie
Cole Johnson

1
@Cole Właściwie myślę, że powinno być table > tr > tdi table > tr > th. Jest to prawie tak szybkie, jak tri th, i gwarantuje, że zadziała, jeśli masz zagnieżdżony stół. Just my 2c
leviathanbadger

@ powyżej, ale czy tableselektor jest potrzebny? IIRC, a <td>jest nieważne, chyba że wewnątrz <tr>.
Cole Johnson

114

Ustawienie marginesów w komórkach tabeli, o ile wiem, nie ma żadnego efektu. Prawdziwy odpowiednik CSS dla cellspacingtoborder-spacing - ale nie działa w Internet Explorerze.

Możesz użyć, border-collapse: collapseaby niezawodnie ustawić odstępy między komórkami na 0, jak wspomniano, ale dla każdej innej wartości uważam, że jedynym sposobem na przeglądarkę jest używanie tego cellspacingatrybutu.


47
W dzisiejszych czasach ta rzeczywistość jest do kitu N-tego stopnia.
John K,

7
Jest to prawie poprawne, ale border-collapsedziała tylko w IE 5-7, jeśli tabela nie ma jeszcze cellspacingzdefiniowanego atrybutu. Napisałem wyczerpującą odpowiedź, która łączy wszystkie poprawne części innych odpowiedzi na tej stronie w przypadku, gdy jest to pomocne.
Eric Nguyen,

Szczerze mówiąc, kogo obchodzi Internet Explorer? Każdy, kto używa go powinien wiedzieć połamane strony są ich winą - za pomocą takiego przeglądarkę niskiej jakości. Strony internetowe nie powinny mieć z tym do czynienia. Niech Internet Explorer zaginie. Zapomnij o jego wsparciu. Nie potrzebujemy tego, a rozwój tego wymaga bólu.

99

Ten hack działa w przeglądarce Internet Explorer 6 i nowszych, Google Chrome , Firefox i Opera :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

*Deklaracja jest dla programu Internet Explorer 6 i 7, a inne przeglądarki będą prawidłowo go zignorować.

expression('separate', cellSpacing = '10px')zwraca 'separate', ale obie instrukcje są uruchamiane, ponieważ w JavaScript można przekazać więcej argumentów niż oczekiwano i wszystkie zostaną ocenione.


dla tych, którzy próbują odpowiedzieć na e-maile, zauważ, że * nie jest rozpoznawany przez program Outlook 2007+ (używa słowa jako mechanizmu renderowania) campaignmonitor.com/css
ptim

71

Dla tych, którzy chcą niezerowej wartości odstępu między komórkami, następujący CSS działał dla mnie, ale mogę go przetestować tylko w Firefoksie.

Zobacz link Quirksmode opublikowany w innym miejscu, aby uzyskać szczegółowe informacje na temat zgodności. Wygląda na to, że może nie działać ze starszymi wersjami Internet Explorera.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

54

Prostym rozwiązaniem tego problemu jest:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

49

Również, jeśli chcesz cellspacing="0", nie zapomnij dodać border-collapse: collapsew swojej table„s stylów.


43

Zawiń zawartość komórki div i możesz zrobić wszystko, co chcesz, ale musisz owinąć każdą komórkę w kolumnie, aby uzyskać jednolity efekt. Na przykład, aby uzyskać szerszy lewy i prawy margines:

CSS będzie więc

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}
<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

Tak, to kłopot. Tak, działa z Internet Explorerem. W rzeczywistości przetestowałem to tylko w przeglądarce Internet Explorer, ponieważ to wszystko, czego możemy używać w pracy.


Chciałbym móc głosować więcej ... Pierwszy przykład, który nie powtórzył innych, i taki, który pokazuje, jak ograniczyć efekt do pojedynczego stołu lub komórki, zamiast wszystkich na stronie !!!
vapcguy

23

Po prostu użyj border-collapse: collapsedo stołu i paddingdo thlub td.


21

Ten styl służy do pełnego resetowania tabel - podkładanie komórek , odstępy między komórkami i obramowania .

Miałem ten styl w pliku reset.css:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

20

TBH. Do wszystkich fanatyków z CSS możesz równie dobrze skorzystać, cellpadding="0" cellspacing="0"ponieważ nie są przestarzałe ...

Nikt inny sugerujący marże na <td>oczywiście nie próbował tego.


35
Są one faktycznie przestarzałe w HTML5.
Kzqai

18
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

17

Wystarczy użyć reguł wypełniania CSS z danymi tabeli:

td { 
    padding: 20px;
}

I dla odstępów między krawędziami:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

Może jednak powodować problemy w starszych wersjach przeglądarek, takich jak Internet Explorer, ze względu na różną implementację modelu pudełkowego.


15

Z klasyfikacji W3C rozumiem, że <table>są one przeznaczone do wyświetlania danych „tylko”.

Na tej podstawie znacznie łatwiej było utworzyć <div>tło z innymi elementami i mieć tabelę z danymi unoszącymi się nad nim za pomocą position: absolute;i background: transparent;...

Działa w Chrome, Internet Explorerze (6 i nowszych) i Mozilla Firefox (2 i nowszych).

Marginesów (lub oznaczało jakikolwiek) w celu utworzenia przekładki pomiędzy elementami pojemnika, takie jak <table>, <div>a <form>, a nie <tr>, <td>, <span>i <input>. Używanie go do czegokolwiek innego niż elementy kontenera sprawi, że będziesz zajęty dostosowywaniem swojej witryny do przyszłych aktualizacji przeglądarki.


7
OP nigdy nie stwierdził, do czego używa tabeli.
Alfabravo,


12

Możesz łatwo ustawić wypełnienie w komórkach tabeli za pomocą właściwości wypełnienia CSS. Jest to prawidłowy sposób na uzyskanie tego samego efektu, co atrybut padania komórek w tabeli.

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

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Podobnie można użyć właściwości CSS border-spacing, aby zastosować odstępy między sąsiadującymi granicami komórek tabeli, takimi jak atrybut odstępu komórek. Jednak w celu pracy z odstępami między krawędziami wartość właściwości zwinięcia obramowania musi być oddzielna, co jest wartością domyślną.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

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

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>


10

Spróbuj tego:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Lub spróbuj tego:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

9

Użyłem !importantpo upadku granicy jak

border-collapse: collapse !important;

i działa dla mnie w IE7. Wydaje się, że zastępuje atrybut odstępu komórek.


9
!importantbyłoby potrzebne tylko w celu zastąpienia innych ustawień CSS w złożonej sytuacji (a nawet wtedy najczęściej niewłaściwe podejście).
Jukka K. Korpela

1
Również powtórzenie odpowiedzi Dana, po prostu dodaje !important, która mogłaby zostać uwzględniona jako komentarz zamiast innej odpowiedzi.
vapcguy

8
<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-paddingmoże być podany przez paddingw CSS, podczas gdy cell-spacingmoże być ustawiony przez ustawienie border-spacingdla tabeli.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle .


6
td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

Jeśli marginnie działa, spróbuj ustawić displayod trdo block, a następnie margines będzie działać.


5

W przypadku tabel odstępy między komórkami i podkładki są przestarzałe w HTML 5.

Teraz dla odstępów między komórkami musisz użyć odstępów między ramkami. A do wypełniania komórek musisz użyć zawijania granicy.

I upewnij się, że nie używasz tego w kodzie HTML5. Zawsze staraj się używać tych wartości w pliku CSS 3.



4

W tabeli HTML znaki cellpaddingicellspacingmogą być ustawione tak:

Do wypełniania komórek :

Wystarczy zadzwonić na prostą td/thkomórkępadding .

Przykład:

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

Dla odstępów między komórkami

Po prostu zadzwoń prosto table border-spacing

Przykład:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

Więcej stylów tabel według źródła CSS link tutaj możesz uzyskać więcej stylów tabel według CSS .


3

Możesz po prostu zrobić coś takiego w swoim CSS, używając border-spacingi padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>


Reguła odstępów między granicami jest ignorowana, gdy są zwinięte.
dgrogan

0

Co powiesz na dodanie stylu bezpośrednio do samej tabeli? Jest to zamiast używania tablew CSS, co jest złym podejściem, jeśli masz wiele tabel na swojej stronie:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

2
Umieszczenie „style” w tagu table jest gorsze niż umieszczenie „table # someId” w twoim css, ponieważ styl powinien zostać oddzielony od treści. Ale głównym punktem pytania jest, jak przekonwertować przestarzały html na właściwy css. Co poprawnie zrobiłeś, ale tak naprawdę nie dodałeś nic do swojej odpowiedzi i koncentrujesz się na niezwiązanym z tym problemie.
Teepeemm

1
Nic nie dodano ?! Dodałem, aby skupić się na tym, jak każda inna odpowiedź w zasadzie mówi, aby użyć td { padding: ... }lub table { border-spacing: ... }zamiast zastosować ją bezpośrednio do tabeli. Te nic nie dodają. Jak powiedziałem, kiedy masz wiele tabel na swojej stronie i nie chcesz na nie wpływać, nie chcesz tego! Nie potrzebujemy całej strony odpowiedzi z napisem „Użyj arkusza stylów!”, Gdy być może jest to ostatnia rzecz, jakiej chcesz, ponieważ chcesz formatować tylko jedną komórkę lub tabelę. To jest, gdy zastosowanie go jest niepożądane tablelub tdjest niepożądane, a tworzenie zupełnie nowej klasy jest nadmierne.
vapcguy

1
Każda inna odpowiedź korzysta z arkusza stylów, ponieważ pierwotne pytanie brzmiało „jak to zrobić za pomocą css”. Gdyby pytanie brzmiało: „jak mogę wpłynąć na css tylko na ten jeden stół”, odpowiedź byłaby bardziej odpowiednia (choć nadal bym faworyzował table#someId).
Teepeemm

2
Technicznie stylizacja wbudowana jest nadal CSS, po prostu nie używa arkusza stylów, ale rozumiem o co ci chodzi.
vapcguy

1
Ponieważ ideą klasy jest możliwość ponownego użycia. Na przykład, to nie ma sensu i jest przesadą, IMHO.
vapcguy

0

Sugeruję to i wszystkie komórki dla konkretnej tabeli zostaną wykonane.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }


0

Możesz sprawdzić poniższy kod, po prostu stwórz index.htmli uruchom go.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

WYNIK :

wprowadź opis zdjęcia tutaj

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.