CSS border-collapse eigenschap
Voorbeeld
Stel het model voor samenvouwende randen in voor twee tabellen:
#table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De border-collapse
eigenschap bepaalt of tabelranden moeten worden samengevouwen tot een enkele rand of gescheiden moeten worden zoals in standaard HTML.
Standaardwaarde: | verschillend |
---|---|
geërfd: | Ja |
Animeerbaar: | Nee. Lees over animeren |
Versie: | CSS2 |
JavaScript-syntaxis: | object .style.borderCollapse="collapse" |
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.
Property | |||||
---|---|---|---|---|---|
border-collapse | 1.0 | 5.0 | 1.0 | 1.2 | 4.0 |
CSS-syntaxis
border-collapse: separate|collapse|initial|inherit;
Eigendomswaarden
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 |
Meer voorbeelden
Voorbeeld
Bij gebruik van "border-collapse: separate", kan de border-spacing eigenschap worden gebruikt om de ruimte tussen de cellen in te stellen:
#table1 {
border-collapse: separate;
border-spacing: 10px;
}
Voorbeeld
Bij gebruik van "border-collapse: collaps", zal de cel die als eerste in de code verschijnt "winnen":
table, td, th {
border: 3px solid red;
}
#table1 {
border-collapse:
collapse;
border-color: blue;
}
Gerelateerde pagina's
CSS-zelfstudie: CSS-tabel
HTML DOM-referentie: eigenschap borderCollapse