Zellpadding und Zellabstand in CSS einstellen?

3317

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

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

Wie kann dasselbe mit CSS erreicht werden?

Kokos
quelle
6
Überprüfen Sie anhand eines allgemeinen Vorschlags, ob Ihre style.css Ihre Tabellen "zurücksetzt", bevor Sie diese Lösungen ausprobieren. Beispiel: Wenn Sie keine Tabellen zu setzen haben width:autodann border-collapsemöglicherweise nicht wie erwartet.
PJ Brunet
1
Verwenden Sie den Randabstand für den Tisch und den Abstand für td.
Anubhav

Antworten:

3554

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 .

Eric Nguyen
quelle
27
cellpadding = "0" kann in Chrome 13.0.782.215 immer noch einen Unterschied machen, selbst wenn Rahmenkollaps: Kollaps und Randabstand auf die Tabelle angewendet werden.
Whitneyland
7
@LeeWhitney Sie müssen Padding: 0 für Ihre Tabellenzellen setzen.
Martin Ørding-Thomsen
7
Es ist ein bisschen abseits des Themas, aber Cellpadding- und Cellspacing-Attribute werden in HTML5 entfernt, sodass CSS jetzt der einzige Weg ist.
Ignas2526
12
Hallo zusammen. Ich habe die Antwort aus Gründen der Klarheit aktualisiert, einschließlich eines Abschnitts über das Auffüllen von Zellen, den ich für offensichtlich gehalten hatte (verwenden Sie einfach "Auffüllen"). Hoffe, es ist jetzt nützlicher.
Eric Nguyen
4
Richtig, @vapcguy, in jeder der unendlich variablen anderen Situationen, in denen Sie möglicherweise eine Tabelle gestalten, müssen Sie spezifischere Selektoren definieren. Die oben genannten sind als Beispiele gekennzeichnet.
Eric Nguyen
942

Standard

Das Standardverhalten des Browsers entspricht:

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

         Geben Sie hier die Bildbeschreibung ein

Cellpadding

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

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

        Geben Sie hier die Bildbeschreibung ein

Zellenabstand

Steuert den Abstand zwischen Tabellenzellen

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

        Geben Sie hier die Bildbeschreibung ein

Beide

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

        Geben Sie hier die Bildbeschreibung ein

Beides (speziell)

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

        Geben Sie hier die Bildbeschreibung ein

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.

Peter Mortensen
quelle
1
Wie verschwindet der Abstand um den Tisch? Wenn ich "Randabstand: 8px 12px" einstelle, wird der Abstand nicht nur zwischen, sondern auch zwischen dem Tabellenrand und den äußeren Zellen hinzugefügt! Aber das ist in den Bildern hier nicht dargestellt; sie sind bündig links.
Kaz
1
@ 2astalavista Und leider funktioniert dies mit diesen CSS-Attributen nicht, wenn jemand möchte, dass der Effekt des äußeren Abstands gelöscht wird.
Kaz
@Kaz Möglicherweise müssen Sie einen negativen Rand verwenden, um diesen nervigen Teil auszublenden.
2
Die Standard - Polsterung auf TD ist in der Regel 1px, nicht 0
Jan M
341
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
Welpe
quelle
2
Dies ist eigentlich das einzige, was ich für mich arbeiten lassen könnte, obwohl ich die Informationen auf eine ID angewendet habe, um nicht zu allgemein zu sein.
Kzqai
20
Das ist cellspacing=0gleichwertig. Das Äquivalent für cellspacing=1ist völlig anders. Siehe die akzeptierte Antwort.
TRiG
3
Sollte nicht table tdund table thwerden nur tdund thjeweils? Es funktioniert so oder so, aber ein kleinerer Selektor bedeutet etwas schnelleres Matching
Cole Johnson
1
@Cole Eigentlich denke ich sollte es sein table > tr > tdund table > tr > th. Dies ist fast so schnell wie trund thund funktioniert garantiert, wenn Sie eine verschachtelte Tabelle haben. Nur mein 2c
Leviathanbadger
@ übery00, aber wird der tableSelektor benötigt? IIRC, a <td>ist ungültig, es sei denn, innerhalb von a <tr>.
Cole Johnson
114

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.

Will Prescott
quelle
47
In der heutigen Zeit ist diese Realität bis zum N-ten Grad ein Trottel.
John K
7
Dies ist fast korrekt, border-collapsefunktioniert jedoch nur in IE 5-7, wenn für die Tabelle noch kein cellspacingAttribut definiert ist. Ich habe eine umfassende Antwort geschrieben, in der alle korrekten Teile der anderen Antworten auf dieser Seite zusammengeführt werden, falls dies hilfreich ist.
Eric Nguyen
Um ehrlich zu sein, wen interessiert der Internet Explorer? Jeder, der es benutzt, sollte wissen, dass defekte Websites seine Schuld sind - für die Verwendung eines Browsers von geringer Qualität. Websites sollten sich nicht damit befassen müssen. Lassen Sie den Internet Explorer verloren gehen. Vergiss die Unterstützung dafür. Wir brauchen es nicht und es ist ein Schmerz, für den wir uns entwickeln müssen.
99

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.

Vitalii Fedorenko
quelle
für diesen Versuch reagiert , E - Mails, zur Kenntnis , dass * nicht durch Outlook 2007+ (verwendet Wort als Render - Engine) erkannt wird campaignmonitor.com/css
PTIM
71

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;
}
Malvineous
quelle
54

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;
}
George Filippakos
quelle
49

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

Matte
quelle
43

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.

Robert White
quelle
Ich wünschte, ich könnte mehr Stimmen abgeben ... Erstes Beispiel, bei dem die anderen nicht wiederholt wurden, und eines, das zeigt, wie der Effekt auf eine einzelne Tabelle oder Zelle beschränkt werden kann, anstatt auf alle auf der Seite !!!
Vapcguy
23

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

Dan
quelle
21

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

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.

Korrektor
quelle
35
Sie sind in HTML5 tatsächlich veraltet.
Kzqai
18
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
Abhishek Singh
quelle
17

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.

suraj rawat
quelle
15

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.

RolanDecoy
quelle
7
OP hat nie angegeben, wofür er den Tisch benutzt.
Alfabravo
13

CSS:

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

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>

Rafiqul Islam
quelle
10

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;
}
Falguni Panchal
quelle
9

Ich benutzte !importantnach dem Grenzkollaps gerne

border-collapse: collapse !important;

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

Håkan Nilsson
quelle
9
!importantwäre nur erforderlich, um andere CSS-Einstellungen in einer komplexen Situation zu überschreiben (und selbst dann meistens einen falschen Ansatz).
Jukka K. Korpela
1
Auch eine Wiederholung von Dans Antwort fügt nur die hinzu !important, die als Kommentar anstelle einer anderen Antwort hätte eingefügt werden können.
Vapcguy
8
<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 .

Fuddin
quelle
6
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.

Majid Sadr
quelle
5

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.

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

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:

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

Mehr Tabellenstil durch CSS-Quelllink Hier erhalten Sie mehr Tabellenstil durch CSS .

MD Ashik
quelle
3

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>

Alireza
quelle
Die Randabstandsregel wird ignoriert, wenn Ränder reduziert werden.
Dgrogan
0

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>
vapcguy
quelle
2
Das Einfügen von "style" in das Tabellen-Tag ist schlechter als das Einfügen von "table # someId" in Ihr CSS, da das Styling vom Inhalt getrennt werden sollte. Der Hauptpunkt der Frage ist jedoch, wie das veraltete HTML in das richtige CSS konvertiert werden kann. Was Sie richtig gemacht haben, aber mit Ihrer Antwort nichts wirklich hinzugefügt haben und sich auf ein nicht verwandtes Problem konzentrieren.
Teepeemm
1
Nichts hinzugefügt?! Was ich wurde zu konzentrieren, wie jede andere Antwort hier im Grunde sagt , zu verwenden , td { padding: ... }oder table { border-spacing: ... }, statt sie direkt an den Tisch anwenden. Die fügen nichts hinzu. Wie gesagt, wenn Sie mehrere Tabellen auf Ihrer Seite haben und diese nicht beeinflussen möchten, möchten Sie dies nicht! Wir brauchen keine ganze Seite mit Antworten mit der Aufschrift "Verwenden Sie das Stylesheet!", Wenn dies möglicherweise das Letzte ist, was Sie möchten, da Sie nur eine Zelle oder Tabelle formatieren möchten. Das ist, wenn es angewendet wird tableoder tdunerwünscht ist und das Erstellen einer ganz neuen Klasse dafür ist übertrieben.
Vapcguy
1
Bei jeder anderen Antwort wird ein Stylesheet verwendet, da die ursprüngliche Frage lautete: "Wie kann ich dies mit CSS tun?". Wenn die Frage lautete: "Wie kann CSS nur diese eine Tabelle beeinflussen?", Wäre Ihre Antwort angemessener (obwohl ich dies immer noch befürworten würde table#someId).
Teepeemm
2
Technisch gesehen ist Inline-Styling immer noch CSS, nur ohne Stylesheet, aber ich verstehe, worum es geht.
Vapcguy
1
Weil die Idee hinter einer Klasse die Wiederverwendbarkeit ist. Für einen Einzelfall macht das wenig Sinn und ist übertrieben, IMHO.
Vapcguy
0

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

Greggo
quelle
0

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 :

Geben Sie hier die Bildbeschreibung ein

Amaresh Tiwari
quelle