Zellpadding und Zellabstand in CSS einstellen?

In einer HTML-Tabelle kann das cellpaddingund cellspacingwie folgt festgelegt werden:

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

Wie kann dasselbe mit CSS erreicht werden?

Grundlagen

Zur Steuerung von "Cellpadding" in CSS können Sie einfach paddingTabellenzellen verwenden. ZB für 10px "Cellpadding":

td { 
    padding: 10px;
}

Für "Zellenabstand" können Sie die border-spacingCSS-Eigenschaft auf Ihre Tabelle anwenden . ZB für 10px "Zellabstand":

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

Diese Eigenschaft ermöglicht sogar getrennte horizontale und vertikale Abstände, was mit dem "Zellenabstand" der alten Schule nicht möglich ist.

Probleme im IE <= 7

Dies funktioniert in fast allen gängigen Browsern, mit Ausnahme von Internet Explorer bis Internet Explorer 7, wo Sie fast kein Glück haben. Ich sage "fast", weil diese Browser immer noch die border-collapseEigenschaft unterstützen, die die Ränder benachbarter Tabellenzellen zusammenführt. Wenn Sie versuchen, den Zellabstand zu eliminieren (d. H. cellspacing="0") , Sollte border-collapse:collapsedies den gleichen Effekt haben: Kein Leerzeichen zwischen Tabellenzellen. Diese Unterstützung ist jedoch fehlerhaft, da sie ein vorhandenes cellspacingHTML-Attribut für das Tabellenelement nicht überschreibt .

Kurz gesagt: Für Nicht-Internet Explorer 5-7-Browser werden border-spacingSie behandelt. Wenn Ihre Situation für Internet Explorer genau richtig ist (Sie möchten einen Zellenabstand von 0 und Ihre Tabelle hat ihn noch nicht definiert), können Sie ihn verwenden border-collapse:collapse.

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

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

Standard

Das Standardverhalten des Browsers entspricht:

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

Cellpadding

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

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

Zellenabstand

Steuert den Abstand zwischen Tabellenzellen

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

Beide

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

Beides (speziell)

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

Hinweis: Wenn border-spacingfestgelegt, wird die border-collapseEigenschaft der Tabelle angezeigt separate.

Versuch es selber!

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

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

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

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

Sie können verwenden border-collapse: collapse, um den Zellenabstand wie erwähnt zuverlässig auf 0 zu setzen, aber für jeden anderen Wert denke ich, dass der einzige browserübergreifende Weg darin besteht, das cellspacingAttribut weiterhin zu verwenden.

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 zurück 'separate', aber beide Anweisungen werden ausgeführt, da Sie in JavaScript mehr Argumente als erwartet übergeben können und alle ausgewertet werden.

Für diejenigen, die einen Zellabstandswert 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 dem Quirksmode- Link an anderer Stelle . Es scheint, dass es mit älteren Internet Explorer-Versionen möglicherweise nicht funktioniert.

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

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

Wenn Sie möchten cellspacing="0", vergessen Sie auch nicht , das Stylesheet border-collapse: collapseIhres tableStylesheets hinzuzufügen .

Wickeln Sie den Inhalt der Zelle mit einem div ein und Sie können alles tun, was Sie wollen, aber Sie müssen jede Zelle in eine Spalte einschließen, um einen einheitlichen Effekt zu erzielen. Zum Beispiel, um nur einen breiteren linken und rechten Rand zu erhalten:

So wird das 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 Internet Explorer. Tatsächlich habe ich dies nur mit Internet Explorer getestet, da dies alles ist, was wir bei der Arbeit verwenden dürfen.

Verwenden border-collapse: collapseSie es einfach für Ihren Tisch und paddingfür thoder td.

Dieser Stil ist für vollständigen Reset für Tabellen - cellpadding , Cellspacing und Grenzen .

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

TBH. Für all das Fannying mit CSS können Sie genauso gut einfach verwenden, cellpadding="0" cellspacing="0"da sie nicht veraltet sind ...

Jeder andere, der Margen vorschlägt <td>, hat dies offensichtlich nicht versucht.

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

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 Versionen von Browsern wie Internet Explorer können jedoch aufgrund der unterschiedlichen Implementierung des Box-Modells Probleme auftreten.

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

Basierend auf , dass ich fand es viel einfacher , eine zu schaffen <div>mit den Hintergründen und all das und hat eine Tabelle mit Daten schwebend über sie mit position: absolute;und background: transparent;...

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

Pannen werden verwendet (oder bedeuten sowieso) einen Abstandshalter zwischen den Behälterelementen zu schaffen, wie <table>, <div>und <form>nicht <tr>, <td>, <span>oder <input>. Wenn Sie es für andere Zwecke als Containerelemente verwenden, können Sie Ihre Website für zukünftige Browser-Updates anpassen.

CSS:

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

Mit der CSS-Auffüllungseigenschaft können Sie das Auffüllen in den 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 Eigenschaft CSS-Rahmenabstand verwenden, um den Abstand zwischen benachbarten Tabellenzellenrändern wie das Zellenabstandsattribut anzuwenden. Um jedoch den Randabstand zu bearbeiten, muss der Wert der Eigenschaft "Randkollaps" getrennt sein, was standardmäßig der Fall ist.

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>

Versuche dies:

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

Oder versuchen Sie Folgendes:

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

Ich benutzte !importantnach dem Grenzkollaps gerne

border-collapse: collapse !important;

und es funktioniert bei mir in IE7. Es scheint das Zellabstandsattribut zu überschreiben.

<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-paddingkann paddingin CSS angegeben werden, während cell-spacingdies durch Festlegen der border-spacingTabelle festgelegt werden kann.

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

Geige .

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

Wenn marginnicht funktioniert, versuchen Sie , Set displayvon trauf blockund dann wird Marge arbeiten.

Bei Tabellen sind Cellspace und Cellpadding in HTML 5 veraltet.

Für den Zellenabstand müssen Sie jetzt den Randabstand verwenden. Und für das 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.

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

In einer HTML-Tabelle kann das cellpaddingund cellspacingwie folgt festgelegt werden:

Zum Auffüllen von Zellen :

Rufen Sie einfach td/theine einfache Zelle an 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 den 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 mehr Tabellenstil durch CSS .

Sie können einfach so etwas in Ihrem CSS tun, indem Sie border-spacingund 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>

Wie wäre es, wenn Sie den Stil direkt zur Tabelle selbst hinzufügen? Dies wird nicht tablein Ihrem CSS verwendet. Dies ist ein schlechter 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>

Ich schlage vor, dass dies und alle Zellen für die bestimmte Tabelle betroffen sind.

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

Sie können den folgenden Code überprüfen, indem Sie einfach einen erstellen index.htmlund ausführen.

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

AUSGABE :