border-collapse - Propriété CSS
Résumé des caractéristiques de la propriété border-collapse
separate
| collapse
separate
border-collapse
passe d'une valeur à l'autre sans transition.Description de border-collapse
.
La propriété border-collapse
définit si les cellules d'un tableau sont accolées ou séparées
par un espace. La largeur de ce dernier peut être précisée avec border-spacing
.
Dans le cas où une bordure est définie, si les cellules sont accolées, les traits de bordure sont
fusionnés, ce qui n'est pas le cas si on précise simplement un espacement égal à zéro
( border-spacing:0px;
).
border-spacing:0;
border-collapse:collapse;
Attention ! Lorsque border-collapse
est défini à la valeur collapse
, les marges intérieures du tableau
(padding
) sont annulées.
D'autre part, la valeur collapse;
peut donner un résultat inesthétique avec des bordures avec un effet 3D
(inset
, ridge
, etc).
Syntaxes pour border-collapse
.
border-collapse:
;
- border-collapse: separate;
Valeur par défaut. Les cellules sont encadrées séparément les unes des autres. Voir aussi la propriété
border-spacing
pour gérer la valeur de l'espacement entre les cellules. - border-collapse: collapse;
Les bordures de deux cellules adjacentes sont fusionnées. La propriété Object est sans effet.
- border-collapse:
initial
; border-collapse:inherit
; border-collapse:revert
; border-collapse:revert-layer
; border-collapse:unset
;La valeur initiale est :
.separate
Animation de la propriété border-collapse
.
L'animation de border-collapse
est possible avec un passage brutal d'une valeur à l'autre. Mais l'intérêt d'animer cette propriété parait assez limité.
Manipulation de la propriété border-collapse
par programme.
Le petit tableau ci-dessous est utilisé comme exemple pour tester les codes.
La modification de la valeur de border-collapse
est immédiatement répercutée sur l'affichage.
A | B | C |
D | E | F |
Modifier la valeur de border-collapse
en Javascript.
En Javascript, deux syntaxes sont acceptées pour modifier la valeur de border-collapse
: la première avec le nom de la propriété écrit dans
la notation kebab-case
typique du css (border-collapse
), et la deuxième qui utilise la notation en camel-case
(borderCollapse
).
function setBorderCollapse(el) {
el.style['border-collapse']='collapse';
// ou
el.style.borderCollapse='collapse';
}
Lire en Javascript la valeur de border-collapse
.
Le code donné ci-dessous explore l'attribut style
du HTML. Autrement dit il récupère la valeur de border-collapse
à condition
que celle-ci ait été affectée via cet attribut style
et non pas via un sélecteur CSS.
function getBorderCollapse(el) {
alert(el.style['border-collapse']);
// ou
alert(el.style.borderCollapse);
}
Lire la valeur calculée de border-collapse
en Javascript.
La valeur calculée résulte de l'évaluation de la cascade des héritages. Cela peut être la valeur donnée à la propriété de l'élément,
soit via son attribut style
ou via un sélecteur CSS, une valeur héritée, ou encore la valeur initiale de border-collapse
.
La valeur calculée est toujours définie.
function getCalcBorderCollapse(el) {
alert(window.getComputedStyle(el).getPropertyValue('border-collapse'));
}
Modifier la valeur de la propriété border-collapse
avec JQuery.
Comme en Javascript, les notations en kebab-case
et en camel-case
sont toutes les deux reconnues.
function setBorderCollapse(el) {
$(el).css('border-collapse','separate');
// ou
$(el).css('borderCollapse','separate');
}
Lire la valeur calculée de la propriété border-collapse
avec JQuery.
function getCalcBorderCollapse(el) {
alert($(el).css('border-collapse'));
// ou
alert($(el).css('borderCollapse'));
}
Exemple interactif.
border-style
:
Compatibilité avec les navigateurs.
La propriété border-collapse
est bien prise en charge par tous les navigateurs actuels.
border-collapse
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que border-collapse
.
Les spécifications CSS éditées par le W3C sont organisées en modules. border-collapse
fait partie du Module CSS - Tableaux (CSS Table Module). Les définitions suivantes sont également décrites dans ce même module.