CSS border-collapse Property

Ustaw model zwijania obramowań dla dwóch tabel:

#table1 {
border-collapse: separate;
}

#table2 {
border-collapse: collapse;
}

Więcej przykładów „Wypróbuj sam” poniżej.

Definicja i użycie

Właściwość border-collapseokreśla, czy obramowania tabeli powinny zwinąć się w pojedynczą ramkę, czy być oddzielone, jak w standardowym HTML.

Domyślna wartość:	rozdzielać
Dziedziczny:	tak
Animowalny:	nie. Przeczytaj o animacji
Wersja:	CSS2
Składnia JavaScript:	obiekt .style.borderCollapse="zwiń"

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Property
border-collapse	1.0	5.0	1.0	1.2	4.0

border-collapse: separate|collapse|initial|inherit;

Value	Description	Play it
separate	Borders are separated; each cell will display its own borders. This is default.
collapse	Borders are collapsed into a single border when possible (border-spacing and empty-cells properties have no effect)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

W przypadku korzystania z opcji „border-collapse: Separate” można użyć właściwości border-spacing do ustawienia odstępu między komórkami:

#table1 {
border-collapse: separate;
border-spacing: 10px;
}

W przypadku użycia opcji „border-collapse: collapse” komórka, która pojawi się jako pierwsza w kodzie, „wygra”:

table, td, th {
border: 3px solid red;
}

#table1 {
border-collapse: collapse;
border-color: blue;
}

Samouczek CSS: Tabela CSS