Zwischenräume zwischen den Tabellenzellen entfernen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Zwischenräume zwischen den einzelnen Zellen sollen entfernt werden.

Lösung

Definieren Sie für die Eigenschaft border-collapse den Wert collapse:

#shoppingcartTable {
 border-collapse: collapse;
 width: 100%;
 border: 1px solid #666;
}
#shoppingcartTable th {
 background: #888 url(th_bkgd.jpg) repeat-x;
 font: italic 1.5em Georgia, "Times New Roman", Times, serif;
 padding: .5em 0 .5em 7px;
 text-align: left;
 border-top: 1px solid #666;
 border-bottom: 1px solid #666;
 text-shadow: #ccc -2px 2px -2px;
}

Diskussion

Durch die Verwendung des Wertes collapse für die Eigenschaft border-collapse wird der Leerraum zwischen den einzelnen Tabellenzellen entfernt. Wenn Sie jetzt für Tabellenzellen einen Rahmen definieren, erhalten Sie eine Linie, die die gesamte Zeile oder Spalte überspannt.

Siehe auch

Das Rezept Rahmen und Innenabstände für Zellen einstellen für eine ausführliche Diskussion des Modells der zusammengefassten Rahmen.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln