Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

border-collapse - Propriété CSS

border-collapse

Résumé des caractéristiques de la propriété border-collapse

Description rapide
Mode d'encadrement des cellules de tableau.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
separate | collapse
Pourcentages
Ne s'appliquent pas.
Valeur initiale
separate
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété border-collapse passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Tableaux
Références (W3C)
Statut du document:: WD (document de travail)

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; ).

Bordures accolées avec
border-spacing:0;
Bordures fusionnées avec
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:
Schéma syntaxique de la propriété border-collapseSyntaxe de border-collapse pour gérer l'espacement entre les cellules d'un tableau. separate separate collapse 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.

ABC
DEF

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 :
border-collapse :
   
   

Compatibilité avec les navigateurs.

La propriété border-collapse est bien prise en charge par tous les navigateurs actuels.

1
border-collapse
Estimation de la prise en charge en pourcentage du parc actuel.
96%

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.

Propriétés.

Espacement entre les cellules adjacentes dans un tableau.
Positionne le titre d'un tableau.
Mode d'affichage des cellules vides.
Mode de calcul des largeurs de colonnes et de tableaux.