Pytanie Ustawić blokowanie komórek i odstępy między komórkami w CSS?


W tabeli HTML: cellpadding i cellspacing można ustawić w następujący sposób:

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

Jak można to osiągnąć za pomocą CSS?


2924
2017-12-04 08:45


pochodzenie


Po prostu ogólna sugestia, sprawdź, czy twój styl.css wykonuje "reset" na twoich stołach przed wypróbowaniem tych rozwiązań. Przykład: Jeśli nie masz tabel ustawionych na width:auto następnie border-collapse może nie działać zgodnie z oczekiwaniami. - PJ Brunet
Użyj odstępu międzyramkowego na stole i dopełnienia na td. - Anubhav


Odpowiedzi:


Podstawy

Aby kontrolować "cellpadding" w CSS, możesz po prostu użyć padding na komórkach tabeli. Na przykład. dla 10px "cellpadding":

td { 
    padding: 10px;
}

W przypadku "przestrzeni komórki" można zastosować znak border-spacing Właściwość CSS do twojego stołu. Na przykład. dla 10 pikseli "przestrzeni komórki":

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

Ta właściwość zezwala nawet na oddzielne poziome i pionowe odstępy między wierszami, co nie jest możliwe w przypadku oldschoolowej "przestrzeni komórki".

Problemy w IE <= 7

To zadziała w prawie wszystkich popularnych przeglądarkach z wyjątkiem Internet Explorera aż do Internet Explorera 7, w którym prawie nie ma szczęścia. Mówię "prawie", ponieważ te przeglądarki nadal obsługują border-collapse właściwość, która łączy granice sąsiadujących komórek tabeli. Jeśli próbujesz wyeliminować przestrzeń między komórkami (to znaczy cellspacing="0") następnie border-collapse:collapse powinien mieć taki sam efekt: brak odstępu między komórkami tabeli. Ta obsługa jest jednak błędna, ponieważ nie zastępuje istniejącego cellspacing Atrybut HTML w elemencie tabeli.

W skrócie: w przeglądarkach 5-7 w przeglądarkach innych niż Internet, border-spacing zajmuje się tobą. W przypadku przeglądarki Internet Explorer, jeśli Twoja sytuacja jest właściwa (potrzebujesz 0 miejsca na dane, a stół już go nie zdefiniował), możesz użyć border-collapse:collapse.

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

Uwaga: Aby uzyskać doskonały przegląd właściwości CSS, które można zastosować do tabel i dla których przeglądarek, zobacz to fantastyczna strona Quirksmode.


3227
2017-07-09 02:34



cellpadding = "0" nadal może sprawić różnicę w Chrome 13.0.782.215, nawet jeśli border-collapse: collapse i border-spacing są zastosowane do tabeli. - Lee
@LeeWhitney należy ustawić dopełnienie: 0 w komórkach tabeli. - Martin Ørding-Thomsen
To trochę nie na temat, ale atrybuty cellpad i cellspacing są usuwane w HTML5, więc CSS to jedyny sposób, aby przejść teraz. - Ignas2526
Cześć wszystkim. Zaktualizowałem odpowiedź dla jasności, w tym rozdział dotyczący podkładki na komórki, który uważałem za oczywisty (wystarczy użyć "dopełnienia"). Mam nadzieję, że teraz jest bardziej przydatna. - Eric Nguyen
Prawda, @vapcguy, w dowolnej z nieskończenie zmiennych innych sytuacji, w których możesz stylizować tabelę, będziesz musiał zdefiniować bardziej szczegółowe selektory. Powyższe są oznaczone jako przykłady. - Eric Nguyen


Domyślna

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

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

enter image description here

Cellpadding

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

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

enter image description here

Cellspacing

Kontroluje przestrzeń między komórkami tabeli

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

enter image description here

Obie

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

enter image description here

Obie (specjalne)

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

enter image description here

Uwaga: Jeśli jest border-spacing zestaw, wskazuje border-collapse właściwością stołu jest separate.

Spróbuj sam!

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


851
2018-06-12 10:24



W jaki sposób znikają odstępy wokół stołu? Kiedy ustawiam "border-spacing: 8px 12px, dodaje odstępy nie tylko między, ale między obramowaniem stołu i zewnętrznymi komórkami! Ale to nie jest pokazane na obrazkach tutaj, są one w kolorze na lewo. - Kaz
@ 2astalavista I niestety, jeśli ktoś chce usunąć efekt odstępów zewnętrznych, nie będzie działał w ten sposób z tymi atrybutami CSS. - Kaz
@Kaz Możesz potrzebować użyć marginesu ujemnego, aby ukryć tę irytującą część.
Domyślna wielkość padding na TD jest zwykle 1px, a nie 0 - Jan M


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

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

313
2017-08-24 15:17



To jest właściwie jedyna rzecz, którą mogłem dla mnie uzyskać, mimo że zastosowałem informacje do identyfikatora, aby uniknąć nadmiernego ogólnego charakteru. - Kzqai
Jest to cellspacing=0 równowartość. Odpowiednik dla cellspacing=1 jest zupełnie inny. Zobacz zaakceptowaną odpowiedź. - TRiG
Nie powinno table td i table th poprostu być td i th odpowiednio? Działa w dowolny sposób, ale mniejszy selektor oznacza nieco szybsze dopasowanie - Cole Johnson
@Cole Właściwie, myślę, że tak powinno być table > tr > td i table > tr > th. To prawie tak szybko, jak tr i thi jest gwarantowane działanie, jeśli masz zagnieżdżony stół. Tylko moje 2c - aboveyou00
@ Powyżej ty20, ale jest to table potrzebny selektor? IIRC, a <td> jest nieprawidłowy, chyba że w a <tr>. - Cole Johnson


Ustawienie marginesów na komórkach tabeli nie ma żadnego wpływu, o ile wiem. Prawdziwy odpowiednik CSS dla cellspacing jest border-spacing - ale nie działa w przeglądarce Internet Explorer.

Możesz użyć border-collapse: collapse niezawodnie ustawić odstępy między komórkami na 0, ale dla jakiejkolwiek innej wartości uważam, że jedynym sposobem na przeglądanie w różnych przeglądarkach jest używanie cellspacing atrybut.


104
2017-12-04 09:18



W dzisiejszych czasach ta rzeczywistość jest suckage do Nth degree. - John K
To prawie prawda, ale border-collapse działa tylko w IE 5-7, jeśli tabela nie ma jeszcze cellspacing zdefiniowany atrybut. Napisałem wyczerpującą odpowiedź, która łączy wszystkie poprawne części pozostałych odpowiedzi na tej stronie, na wypadek, gdyby było to pomocne. - Eric Nguyen
Szczerze mówiąc, kogo obchodzi Internet Explorer? Każdy, kto go używa, powinien wiedzieć, że uszkodzone są strony internetowe ich fault - za korzystanie z takiej przeglądarki o niskiej jakości. Strony internetowe nie powinny zajmować się tym. Pozwól Internet Explorerowi zagubić się. Zapomnij o tym. Nie potrzebujemy tego i jest to trudny do opracowania. - Dev


Ten hack działa dla Internet Explorera 6 i późniejszych, 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 */
}

The * deklaracja dotyczy przeglądarki Internet Explorer 6 i 7, a inne przeglądarki odpowiednio ją ignorują.

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


84
2017-12-05 04:30



dla tych, którzy próbują odpowiadać na wiadomości e-mail, zauważ, że * nie jest rozpoznawana przez Outlook 2007+ (używa słowa jako silnika renderującego) campaignmonitor.com/css - ptim


Dla tych, którzy chcą mieć niezerową wartość przestrzeni między komórkami, dla mnie działał poniższy arkusz CSS, ale mogę go przetestować tylko w Firefoksie. Zobacz Tryb Quirksmode połączyć opublikowane w innym miejscu dla szczegółów kompatybilności. Wygląda na to, że może nie działać ze starszymi wersjami przeglądarki Internet Explorer.

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

61
2017-08-20 03:32





Proste rozwiązanie tego problemu to:

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

44
2017-12-08 16:04





Ponadto, jeśli chcesz cellspacing="0", nie zapomnij dodać border-collapse: collapse w Twoim tableArkusz stylów.


40
2017-12-04 09:06





Zawiń zawartość komórki za pomocą elementu div i możesz zrobić wszystko, co chcesz, ale musisz zawinąć każdą komórkę w kolumnie, aby uzyskać jednolity efekt. Na przykład, aby uzyskać szersze lewe i prawe marginesy:

Więc CSS będzie,

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 IE. W rzeczywistości testowałem to tylko z IE, ponieważ to wszystko, co możemy używać w pracy.


33
2018-06-19 14:57



Żałuję, że nie mogłem przegł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 do wszystkich na stronie !!! - vapcguy