CSS 2.1 ::Referenz ::Eigenschaften
CSS 2.1: border-spacing
Erläuterungen
Im Rahmen des sog. 'Modells der getrennten Rahmen' definiert die Eigenschaft border-spacing
die Breite der Räume zwischen den einzelnen Zellen einer Tabelle. In diesem Modell hat jede Zelle ihren eigenen Rahmen, Zwischenräume werden mit den für den Tabellenhintergrund definierten Eigenschaften gefüllt.
Die Eigenschaft border-spacing
hat nur dann Auswirkungen, wenn das 'Separated Borders Model' durch den Wert separate
der Eigenschaft border-collapse
definiert wurde.
Reihen, Spalten oder Gruppen von Reihen oder von Spalten können in diesem Fall keine Rahmen haben, das Anwenderprogramm muß daher Deklarationen der Eigenschaft border
für diese Elemente ignorieren.
Die hier definierten Abstände sind nicht mit den Rahmen-Randabständen (margin
) anderer Elemente vergleichbar. Sie bestimmen die absoluten Abstände zwischen den Zellen einer Tabelle.
Erlaubte Werte
Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):
'border-spacing' <length> <length>? | inherit
<length>
,<length>
- Ein oder zwei Längenangaben. Sind zwei Werte angegeben, dann gilt der erste für den horizontalen und der zweite für den vertikalen Zellenabstand. Ist ein einzelner Wert gegeben, gilt er für beide Richtungen. Negative Werte sind nicht erlaubt.
- Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
- Wichtig: der Ausgangswert für
border-spacing
ist '0
'. Dennoch stellen fast alle modernen Browser die Zellen einer Tabelle mit ein oder zwei Pixeln Zwischenraum dar, wennborder-collapse: separate;
deklariert ist. Nur wenn manborder-spacing
explizit mit '0
' deklariert, werden die Rahmen benachbarter Zellen direkt neben einander gezeichnet. inherit
- Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.
Code-Beispiel:
(Die Rahmen der einzelnen Zellen der Tabellen in den Screenshots wurden per Inline-Styles definiert.)
TABLE { border-collapse: separate; border-spacing: 10px; border: 2px outset #6699ee; }
TABLE { border-collapse: separate; border-spacing: 30px 10px; border: 2px outset #6699ee; }
Browserunterstützung
Die Eigenschaft border-spacing
wird nicht von allen modernen Browsern unterstützt:
- IE/Win 5.x, IE/Win 6, IE 7
- IE/Win erkennt das CSS-Tabellenmodell nur teilweise und stellt deshalb Rahmen an Tabellenzellen immer gleich dar bzw. abhängig davon, ob die Zellen gefüllt sind oder nicht. Abhilfe durch das Attribut
cellspacing
im Starttagtable
. - IE/Mac 5.x
- Beim IE/Mac ist die Darstellung von Rahmen an Tabellenzellen ebenfalls davon abhängig, ob die Zellen leer oder gefüllt sind.
Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.
Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.
Wechselwirkungen:
Besonderheiten im Medientyp handheld
:
Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Das CSS-Tabellenmodell ist für das Medium handheld
nicht anwendbar. Die Eigenschaften border-collapse
, border-spacing
, caption-side
und empty-cells
sind nicht Teil des Standards 'CSS Mobile'.
Weitere Charakteristika:
Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.
Ausgangs- wert: |
Berechneter Wert: |
Vererbung: | Anwendbar- keit: |
%-Bezugs- wert: |
Medien- gruppe(n): |
---|---|---|---|---|---|
0 |
Zwei absolute Längenwerte | Ja | In Elementen, die als table - oder inline-table dargestellt werden. |
Nicht zutreffend | Visual |
Verwendete Standards
Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 2.1 CR und CSS Mobile.