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

Grundlagen

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

td { 
    padding: 10px;
}

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

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

Diese Eigenschaft erlaubt sogar getrennte horizontale und vertikale Abstände, was mit dem herkömmlichen "cellspacing" nicht möglich war.

Probleme im IE 7

Dies funktioniert in fast allen gängigen Browsern, mit Ausnahme von Internet Explorer bis hin zu Internet Explorer 7, wo Sie fast kein Glück haben. Ich sage "fast", weil diese Browser noch die border-collapse die die Ränder angrenzender Tabellenzellen zusammenführt. Wenn Sie versuchen, die Zellabstände zu eliminieren (d. h., cellspacing="0" ) dann border-collapse:collapse sollte den gleichen Effekt haben: kein Abstand zwischen den Tabellenzellen. Diese Unterstützung ist jedoch fehlerhaft, da sie eine bestehende cellspacing HTML-Attribut für das Tabellenelement.

Kurz gesagt: für Nicht-Internet-Explorer-5-7-Browser, border-spacing behandelt Sie. Für den Internet Explorer können Sie, wenn Ihre Situation genau richtig ist (Sie wollen einen Zellabstand von 0 und Ihre Tabelle hat ihn nicht bereits definiert), Folgendes verwenden border-collapse:collapse .

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

Hinweis: Einen guten Überblick über die CSS-Eigenschaften, die man auf Tabellen anwenden kann und für welche Browser, finden Sie hier fantastische Quirksmode-Seite .

Answer 2

Standard

Das Standardverhalten des Browsers ist gleichbedeutend mit:

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

         

Zellpolsterung

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

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

        

Zellabstand

Steuert den Abstand zwischen den Tabellenzellen

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

        

Beide

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

        

Beide (speziell)

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

        

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

Versuchen Sie es selbst!

Hier finden Sie die alte HTML-Methode, um dies zu erreichen.

Answer 3

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

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

Answer 4

Soweit ich weiß, hat das Einstellen von Rändern für Tabellenzellen keine Auswirkungen. Das echte CSS-Äquivalent für cellspacing es border-spacing - aber im Internet Explorer funktioniert es nicht.

Sie können verwenden border-collapse: collapse um den Zellabstand wie erwähnt zuverlässig auf 0 zu setzen, aber für jeden anderen Wert ist der einzige browserübergreifende Weg wohl, weiterhin die cellspacing Attribut.

Answer 5

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

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

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