Cellpadding und Cellspacing in CSS festlegen?

Question

In einer HTML-Tabelle ist die cellpadding y cellspacing kann auf diese Weise eingestellt werden:

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

Wie kann dasselbe mit CSS erreicht werden?

Answer 1

<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 kann gegeben werden durch padding in CSS, während cell-spacing kann eingestellt werden durch border-spacing für Tabelle.

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

Fiddle .

Answer 2

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

Wenn margin nicht funktioniert hat, versuchen Sie, die display von tr a block und dann wird die Marge funktionieren.

Answer 3

Bei Tabellen sind cellspacing und cellpadding in HTML 5 obsolet.

Für cellspacing müssen Sie border-spacing verwenden. Und für cellpadding müssen Sie border-collapse verwenden.

Und stellen Sie sicher, dass Sie dies nicht in Ihrem HTML5-Code verwenden. Versuchen Sie immer, diese Werte in einer CSS-3-Datei zu verwenden.

Answer 4

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

Answer 5

In einer HTML-Tabelle ist die cellpadding y cellspacing kann auf diese Weise eingestellt werden:

Für cell-padding :

Einfach anrufen td/th Zelle padding .

Beispiel:

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

Für Zellabstand

Einfach anrufen table border-spacing

Beispiel:

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

Mehr Tabellenstil durch CSS-Quelllink hier erhalten Sie weitere Tabellenstile per CSS .