Ustawić cellpadding i cellspacing w CSS?

Default

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

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

Ustawia ilość przestrzeni między zawartością komórki a ścianą komórkową

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

Cellspacing

Kontroluje przestrzeń między komórkami tabeli

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

Obie

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

Obie (special)

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

Uwaga: jeśli istnieje border-spacing, oznacza to, że border-collapse właściwością tabeli jest separate.

Spróbuj sam!

Tutaj można znaleźć Stary HTML sposób osiągnięcia tego.

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

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

Ustawianie marginesów na komórkach tabeli tak naprawdę nie ma żadnego wpływu, o ile wiem. Prawdziwym odpowiednikiem CSS dla cellspacing jest border-spacing - ale nie działa on w Internet Explorerze.

Możesz użyć border-collapse: collapse, aby niezawodnie ustawić odstępy między komórkami na 0, jak wspomniano, ale dla każdej innej wartości myślę, że jedynym sposobem między przeglądarkami jest używanie atrybutu cellspacing.

Ten hack działa dla Internet Explorer 6 i nowszych, Google Chrome , Firefox iOpera :

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

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

Deklaracja * jest przeznaczona dla Internet Explorera 6 i 7, a inne przeglądarki poprawnie ją zignorują.

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

Dla tych, którzy chcą mieć niezerową wartość cellspacing, następujący CSS działał dla mnie, ale jestem w stanie przetestować go tylko w Firefoksie.

Zobacz Quirksmode link opublikowany gdzie indziej aby uzyskać szczegóły zgodności. Wydaje się, że może nie działać ze starszymi wersjami Internet Explorera.

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

Proste rozwiązanie tego problemu to:

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

Ponadto, jeśli chcesz cellspacing="0", nie zapomnij dodać border-collapse: collapse do swojego arkusza stylów table.

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

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>

Wystarczy użyć border-collapse: collapse do stołu, a padding do th lub td.

Ten styl jest dla pełnego resetowania tabel - cellpadding, cellspacing i obramowania.

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. Dla wszystkich fanów z CSS można równie dobrze po prostu użyć cellpadding="0" cellspacing="0" ponieważ nie są przestarzałe...

Ktoś inny sugerujący marginesy na <td>'S oczywiście nie próbował tego.

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

Po prostu Użyj reguł wypełniania CSS z danymi tabeli:

td { 
    padding: 20px;
}

I dla odstępów granicznych:

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

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

Z tego co rozumiem z klasyfikacji W3C wynika, że <table> S są przeznaczone do wyświetlania danych "tylko".

W oparciu o to stwierdziłem, że łatwiej jest stworzyć {[1] } z tłem i tym wszystkim i mieć tabelę z danymi unoszącymi się nad nią za pomocą position: absolute; i background: transparent;...

Marginesy są używane (lub w ogóle) do tworzenia odstępów między elementami kontenera, np. <table>, <div> i <form>, nie <tr>, <td>, <span> lub <input>. Używanie go do innych elementów niż kontenery sprawi, że Twoja witryna będzie zajęta dostosowywaniem się do przyszłych aktualizacji przeglądarki.

CSS:

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

Możesz łatwo ustawić padding wewnątrz komórek tabeli za pomocą właściwości CSS padding. Jest to poprawny sposób na uzyskanie takiego samego efektu jak atrybut cellpadding 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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</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 obramowaniami komórek tabeli, jak atrybut cellspacing. Jednak w celu pracy z odstępami granicznymi wartość właściwości border-collapse musi być oddzielna, co jest default.

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</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 !important po obramowaniu-zwiń jak

border-collapse: collapse !important;

I u mnie działa w IE7. Wydaje się, że nadpisuje atrybut cellspacing.

<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-padding może być podana przez padding w CSS, podczas gdy {[4] } może być ustawiona przez ustawienie border-spacing dla 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 margin nie zadziałało, spróbuj ustawić display z tr na block, a wtedy margines zadziała.

Dla tabel, cellspacing i cellpadding są przestarzałe w HTML 5.

Teraz dla cellspacing musisz użyć border-spacing. A do cellpaddingu trzeba użyć border-collapse.

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

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

W tabeli HTML, cellpadding i cellspacing można ustawić tak:

Dla cell-padding :

Po Prostu zadzwoń do simple td/th cell 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 rozstaw komórek

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

More table style by CSS source link tutaj dostaniesz więcej table style by CSS .

Możesz po prostu zrobić coś takiego w swoim CSS, używając border-spacing i 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>

Możesz sprawdzić poniższy kod po prostu utwórz index.html i 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>

Wyjście:

to mi pomogło.

Tabela {border-collapse: collapse}

Tabela th, tabela TD {padding: 0}

A może dodanie stylu bezpośrednio do samej tabeli? Jest to zamiast używania table w 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>

Proponuję to i wszystkie komórki dla danej tabeli są wykonane.

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