Kaskadowe arkusze stylów CSS: kondensowanie obramowań komórek









Tematy: położenie tytułu | puste komórki | układ tabeli | odstępy komórek | kondensowanie obramowań







Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki







Kondensowanie obramowań komórek



Dane w pigułce


Zastosowanie
pozwala określić, czy obramowania komórek tabeli mają się nakładać na siebie, czy też być rozdzielone


Dziedziczenie
tak


Wartości
collapse, separate


Wartość domyślna
separate


Przykład
border-collapse: collapse


Uwagi



Odpowiednik w HTML
n.d.



Aby zdefiniować kondensowanie wewnętrznych obramowań, należy wpisać w definicji stylu
border-collapse: wartość

Grubość obramowań poszczególnych komórek ustalona w definicji stylu dotyczy każdej komórki z osobna. Powoduje to, że obramowania komórek "dodają się" do siebie. Użycie stylu border-collapse: collapse pozwala je zlać ze sobą, co może poprawić wygląd. Można jednak zachować odstępy między komórkami za pomocą border-collapse: separate.

W przykładzie przyjęliśmy obramowania komórek o grubości 5px. Jak widać, w przypadku collapse obramowania połączyły się, zaś w przypadku separate pozostały oddzielone. Wskutek tego w pierwszym przypadku tabela jest węższa.

<table style="border-collapse: collapse">




komórka 1
komórka 2
komórka 3
komórka 4


komórka 5
komórka 6
komórka 7
komórka 8




<table style="border-collapse: separate">




komórka 1
komórka 2
komórka 3
komórka 4


komórka 5
komórka 6
komórka 7
komórka 8




Interpretacja: Internet Explorer (z błędami), Firefox, Opera