Frage Legen Sie Cellpadding und Zellenabstand in CSS fest?


In einer HTML-Tabelle ist der cellpadding und cellspacing kann wie folgt eingestellt werden:

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

Wie kann dasselbe mit CSS erreicht werden?


2922
2017-12-04 08:45


Ursprung


Antworten:


Grundlagen

Zum Steuern von "cellpadding" in CSS können Sie einfach verwenden padding auf Tabellenzellen. Z.B. für 10px "cellpadding":

td { 
    padding: 10px;
}

Für "cellspacing" können Sie die border-spacing CSS-Eigenschaft für Ihre Tabelle Z.B. für 10px von "cellspacing":

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

Diese Eigenschaft erlaubt sogar separate horizontale und vertikale Abstände, etwas, was Sie mit dem "Zellenabstand" der alten Schule nicht tun könnten.

Probleme in 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 mehr haben. Ich sage "fast", weil diese Browser immer noch das unterstützen border-collapse Eigenschaft, die die Grenzen benachbarter Tabellenzellen zusammenführt. Wenn Sie versuchen, den Zellenabstand zu eliminieren cellspacing="0") dann border-collapse:collapse sollte den gleichen Effekt haben: kein Leerzeichen zwischen den Tabellenzellen. Diese Unterstützung ist jedoch fehlerhaft, da sie ein vorhandenes nicht überschreibt cellspacing HTML-Attribut für das Tabellenelement.

Kurz gesagt: für Browser ohne Internet Explorer 5-7, border-spacing behandelt dich. Wenn Ihre Situation für Internet Explorer genau richtig ist (Sie möchten 0 cellspacing und Ihre Tabelle hat es nicht bereits definiert), können Sie verwenden border-collapse:collapse.

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

Hinweis: Hier finden Sie einen Überblick über die CSS-Eigenschaften, die Sie auf Tabellen und für welche Browser anwenden können fantastische Quirksmode Seite.


3226
2017-07-09 02:34



Standard

Das Standardverhalten des Browsers entspricht:

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

enter image description here

Cellpadding

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

Beide (speziell)

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

enter image description here

Hinweis: Wenn da ist border-spacing gesetzt, es zeigt an border-collapse Eigenschaft der Tabelle ist separate.

Versuch es selber!

Hier Sie können den alten HTML-Weg finden, dies zu erreichen.


849
2018-06-12 10:24



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

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

313
2017-08-24 15:17



Das Setzen von Margen auf Tabellenzellen hat soweit ich weiß nicht wirklich etwas bewirkt. Das wahre CSS-Äquivalent für cellspacing ist border-spacing - aber es funktioniert nicht im Internet Explorer.

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


104
2017-12-04 09:18



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

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

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

Das * Erklärung ist für Internet Explorer 6 und 7, und andere Browser werden es ordnungsgemäß ignorieren.

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


84
2017-12-05 04:30



Für diejenigen, die einen Zellabstand haben wollen, der nicht Null ist, funktionierte das folgende CSS für mich, aber ich kann es nur in Firefox testen. Siehe die Quirkmodus Verknüpfung an anderer Stelle geschrieben für Kompatibilitätsdetails. Scheint, dass es nicht mit älteren Versionen von Internet Explorer funktioniert.

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

61
2017-08-20 03:32



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

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

44
2017-12-08 16:04



Auch wenn du willst cellspacing="0"Vergessen Sie nicht hinzuzufügen border-collapse: collapse in deinem tableStylesheet.


40
2017-12-04 09:06



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

Also 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 mühsam. Ja, es funktioniert mit IE. In der Tat habe ich das nur mit IE getestet, denn das ist alles, was wir bei der Arbeit verwenden dürfen.


33
2018-06-19 14:57