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

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

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

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

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 .

Domyślna

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

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

Podkładka na telefon

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

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

Odstępy między komórkami

Kontroluje przestrzeń między komórkami tabeli

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

Obie

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

Oba (specjalne)

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

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.

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

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

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.

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 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;
}

Prostym rozwiązaniem tego problemu jest:

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

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

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.

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

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

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.

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

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.

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.

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

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>

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;
}

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.

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

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

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.

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

W tabeli HTML znaki cellpaddingicellspacingmogą być ustawione tak:

Do wypełniania komórek :

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

Przykład:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

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

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

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;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

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

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>

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>

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

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

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 :