wake-up-neo.com

Zellauffüllung und Zellabstand in CSS festlegen?

In einer HTML-Tabelle können cellpadding und cellspacing folgendermaßen festgelegt werden:

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

Wie kann das auch mit CSS erreicht werden?

htmlcsshtml-tablealignment
3169
kokos

Grundlagen

Um das "Cellpadding" in CSS zu steuern, können Sie einfach padding für Tabellenzellen verwenden. Z.B. für 10px von "cellpadding":

td { 
    padding: 10px;
}

Für "Zellabstand" können Sie die CSS-Eigenschaft border-spacing auf Ihre Tabelle anwenden. Z.B. für 10px "Zellenabstand":

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

Diese Eigenschaft erlaubt sogar getrennte horizontale und vertikale Abstände, was Sie mit dem "Zellenabstand" der alten Schule nicht erreichen können.

Probleme in IE <= 7

Dies funktioniert in fast allen gängigen Browsern, mit Ausnahme von Internet Explorer bis Internet Explorer 7, wo Sie fast Pech haben. Ich sage "fast", weil diese Browser immer noch die Eigenschaft border-collapse unterstützen, mit der die Grenzen benachbarter Tabellenzellen zusammengeführt werden. Wenn Sie versuchen, den Zellenabstand zu beseitigen (d. H. cellspacing="0"), sollte border-collapse:collapse den gleichen Effekt haben: Kein Leerzeichen zwischen Tabellenzellen. Diese Unterstützung ist jedoch fehlerhaft, da sie ein vorhandenes HTML-Attribut cellspacing für das Tabellenelement nicht überschreibt.

Kurz gesagt: Bei Browsern, die nicht mit Internet Explorer 5-7 arbeiten, werden Sie von border-spacing behandelt. Für Internet Explorer können Sie border-collapse:collapse verwenden, wenn Ihre Situation genau richtig ist (Sie möchten einen Zellabstand von 0 und für Ihre Tabelle ist dieser noch nicht definiert).

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

Hinweis: Eine gute Übersicht über die CSS-Eigenschaften, die für Tabellen und für welche Browser angewendet werden können, finden Sie auf dieser Seite fantastische Quirksmode-Seite .

3452
Eric Nguyen

Default

Das Standardverhalten des Browsers entspricht:

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

Enter image description here

Zellpolsterung

Legt den Abstand zwischen dem Inhalt der Zelle und der Zellwand fest

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

Enter image description here

Zellenabstand

Steuert den Abstand zwischen Tabellenzellen

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

Enter image description here

Beide

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

Enter image description here

Beides (speziell)

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

Enter image description here

Hinweis: Wenn border-spacing gesetzt ist, zeigt dies an, dass die border-collapse -Eigenschaft der Tabelle separate ist.

Probieren Sie es aus!

Hier Hier finden Sie den alten HTML-Weg, um dies zu erreichen.

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

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

Das Festlegen von Rändern für Tabellenzellen hat meines Wissens keine wirklichen Auswirkungen. Das wahre CSS-Äquivalent für cellspacing ist border-spacing - aber es funktioniert nicht in Internet Explorer.

Sie können border-collapse: collapse verwenden, um den Zellenabstand wie erwähnt zuverlässig auf 0 zu setzen, aber für jeden anderen Wert ist es meines Erachtens die einzige Möglichkeit für den Browser, das cellspacing -Attribut weiterhin zu verwenden.

112
Will Prescott

Dieser Hack funktioniert für Internet Explorer 6 und höher, Google Chrome , Firefox und Opera :

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

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

Die * -Deklaration gilt für Internet Explorer 6 und 7, und andere Browser ignorieren sie ordnungsgemäß.

expression('separate', cellSpacing = '10px') gibt 'separate' zurück, aber beide Anweisungen werden ausgeführt, da Sie in JavaScript mehr Argumente als erwartet übergeben können und alle ausgewertet werden.

95
Vitalii Fedorenko

Für diejenigen, die einen Zellabstand ungleich Null wünschen, hat das folgende CSS für mich funktioniert, aber ich kann es nur in Firefox testen.

Weitere Informationen zur Kompatibilität finden Sie unter Quirksmode Link an anderer Stelle veröffentlicht . Es scheint, dass es möglicherweise nicht mit älteren Internet Explorer-Versionen funktioniert.

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

Die einfache Lösung für dieses Problem lautet:

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

Wenn Sie cellspacing="0" möchten, vergessen Sie nicht, border-collapse: collapse in das Stylesheet Ihres table einzufügen.

47
mat

Umhüllen Sie den Inhalt der Zelle mit einem Div, und Sie können alles tun, was Sie wollen. Sie müssen jedoch jede Zelle in eine Spalte einhüllen, um einen einheitlichen Effekt zu erzielen. Um zum Beispiel den linken und rechten Rand zu vergrößern, gehen Sie wie folgt vor:

So wird die CSS sein,

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>

Ja, es ist ein Ärger. Ja, es funktioniert mit dem Internet Explorer. Tatsächlich habe ich das nur mit dem Internet Explorer getestet, weil wir das nur bei der Arbeit verwenden dürfen.

42
Robert White

Verwenden Sie einfach border-collapse: collapse für Ihren Tisch und padding für th oder td.

23
Dan

Dieser Stil ist für vollständiges Zurücksetzen für Tabellen - Zellauffüllen, Zellabstand und Rahmen.

Ich hatte diesen Stil in meiner reset.css-Datei:

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 */
}
21
Elad Shechter

TBH. Für das ganze Herumfummeln mit CSS kannst du auch einfach cellpadding="0"cellspacing="0" verwenden, da sie nicht veraltet sind ...

Jeder andere, der Ränder für <td> vorschlägt, hat dies offensichtlich nicht ausprobiert.

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

Verwenden Sie einfach CSS-Auffüllregeln mit Tabellendaten:

td { 
    padding: 20px;
}

Und für den Randabstand:

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

In älteren Browserversionen wie dem Internet Explorer kann es jedoch zu Problemen kommen, da das Box-Modell einen Unterschied aufweist.

17
suraj rawat

Aus den W3C-Klassifikationen geht hervor, dass <table>s nur zur Anzeige von Daten gedacht sind.

Aufgrund dessen fand ich es viel einfacher, einen <div> mit den Hintergründen und all dem zu erstellen und eine Tabelle mit Daten zu haben, die mit position: absolute; und background: transparent; darüber schweben.

Es funktioniert unter Chrome, Internet Explorer (6 und höher) und Mozilla Firefox (2 und höher).

Ränder werden verwendet (oder sind sowieso gemeint), um einen Abstandhalter zwischen Containerelementen wie <table>, <div> und <form> zu erstellen, nicht <tr>, <td>, <span> oder <input>. Wenn Sie es nicht nur für Container-Elemente verwenden, müssen Sie Ihre Website für zukünftige Browser-Updates anpassen.

16
RolanDecoy

CSS:

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

Mit der CSS-Padding-Eigenschaft können Sie den Abstand innerhalb der Tabellenzellen einfach festlegen. Dies ist eine gültige Methode, um den gleichen Effekt wie das Cellpadding-Attribut der Tabelle zu erzielen.

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>

In ähnlicher Weise können Sie die CSS-Randabstandseigenschaft verwenden, um den Abstand zwischen benachbarten Tabellenzellenrändern wie das Zellabstandsattribut anzuwenden. Um den Randabstand zu gewährleisten, muss der Wert der Eigenschaft border-collapse jedoch separat angegeben werden. Dies ist die Standardeinstellung.

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>
10
Rafiqul Islam

Versuche dies:

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

Oder versuchen Sie dies:

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

Ich habe !important nach dem Randeinbruch gerne benutzt

border-collapse: collapse !important;

und es funktioniert bei mir im IE7. Es scheint das Zellenabstandsattribut zu überschreiben.

9
Håkan Nilsson
<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 durch padding in CSS angegeben werden, während cell-spacing durch Festlegen von border-spacing für Tabelle festgelegt werden kann.

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

Geige .

8
Fahad Uddin
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, display von tr auf block zu setzen, und der Rand funktioniert dann.

6
Majid Sadr

Bei Tabellen sind der Zellabstand und das Zellauffüllen in HTML 5 veraltet.

Jetzt müssen Sie für den Zellabstand den Randabstand verwenden. Und für das Auffüllen von Zellen müssen Sie den Randausschnitt 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.

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

In einer HTML-Tabelle können cellpadding und cellspacing folgendermaßen festgelegt werden:

Für Zellauffüllung :

Rufen Sie einfach td/th cell padding auf.

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

Nennen Sie einfach tableborder-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 mehr Tabellenstil durch CSS .

3
MD Ashik

Sie können einfach so etwas in Ihrem CSS tun, indem Sie border-spacing und padding verwenden:

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>
3
Alireza

Wie wäre es, wenn Sie den Stil direkt zur Tabelle selbst hinzufügen? Dies ist anstelle der Verwendung von table in Ihrem CSS ein BAD Ansatz, wenn Sie mehrere Tabellen auf Ihrer Seite haben:

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