Táblázatok - Keret összevonás (border-collapse) tulajdonság

A border-collapse tulajdonság szabja meg, hogy a cellák keretei milyen módon jelenjenek meg. Lehetséges értékei:

• collapse: A szomszédos cellák keretei összevonásra kerülnek.
• separate: A szomszédos cellák keretei egymástól elkülönítve megjelennek.
• inherit: a tulajdonság értéke öröklődik a szülő elemtől

A CSS 2.1 szabvány szerint az alapérték: separate. (A szabvány korábbi változatában még a collapse volt az alapérték.) A border-collapse tulajdonságot csak a table elem stílusában lehet definiálni, de az érték automatikusan öröklődik. Tehát amennyiben egy táblázat valamelyik cellája újabb táblázatot tartalmaz, akkor a beágyazott táblázatnak örökölnie kellene a tulajdonság értékét a szülő elemtől, de nem minden böngésző követi ezt az elvet.

Tipp: A border-collapse tulajdonság általad kívánt értékét definiáld a stíluslapokon minden esetben. Ezt ne bízd rá az öröklődésre illetve a böngészők alapbeállításaira. Az idők folyamán változott a szabvány, valamint a böngészők szabványkövetése sem egyértelmű ezzel a tulajdonsággal kapcsolatosan.

Összevont keretek

Ha a border-collapse tulajdonság értéke collapse, akkor a böngészők a szomszédos cellák kereteit úgy szerkesztik meg, hogy a keret vonalak egymást átfedik. Ez a szokásos megjelenítési mód. Lehet kerete a táblázatnak, oszlopcsoportoknak, oszlopoknak, sor csoportoknak, soroknak és az egyes celláknak is.

Gyakran előfordul, hogy különböző stílusú keretek kerülnek azonos vonalra. A CSS szabvány részletes szabályokat tartalmaz arra vonatkozóan, hogy az egymást átfedő keretvonalak közül melyik legyen látható.

Elkülönült keret vonalak

Ha a border-collapse tulajdonság értéke separate, akkor a szomszédos cellák keretei egymástól elkülönülve jelennek meg. Ebben az esetben lehet kerete a táblázatnak és a celláknak, viszont nem lehet kerete az oszlop csoportoknak, oszlopoknak, sor csoportoknak és a soroknak. Ha ez utóbbi elemek stílusában látható keret van megadva, akkor azt a böngészőnek figyelmen kívül kell hagynia.

A keret vonalak közötti távolságot a border-spacing tulajdonság segítségével lehet beállítani.

A következő példában a table elem leírásánál is megtalálható táblázat látható azzal a különbséggel, hogy a cellák keretei egymástól elkülönülten lettek megszerkesztve. A forráskódban az egyetlen eltérés a table elem stílus deklarációja:

table {border-style: solid; border-color: #000000;
   border-width: 3px; margin: auto;
   border-collapse: separate; border-spacing: 4px}

Ami által a táblázat ilyen módon jelenik meg:

Keretvonal távolság (border-spacing) tulajdonság »