Border-collapse - Propriété CSS

Schéma syntaxique de la propriété border-collapse..

Description de la propriété 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; ).

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

Valeurs pour 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é border-spacing est sans effet.

• border-collapse: initial; (separate) border-collapse: inherit; border-collapse: revert; border-collapse: revertLayer; border-collapse: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de 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é.

Utiliser Javascript pour manipuler border-collapse.

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

let el = document.getElementById('id'); el.style['border-collapse'] = 'collapse'; // ou let el = document.getElementById('id'); 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.

let el = document.getElementById('id'); let value = el.style['border-collapse']; // ou let el = document.getElementById('id'); let value = 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.

let el = document.getElementById('id'); let value = 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.


$('#id').css('border-collapse', 'collapse');
// ou
$('#id').css('borderCollapse', 'collapse');


Lire la valeur calculée de la propriété border-collapse avec JQuery.

let value = $('#id').css('border-collapse');

Autres exemples de code.

De nombreux autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Ici vous pouvez tester comment est restitué la valeur calculée. Les boutons ci-dessous appliquent la valeur saisie à la propriété border-collapse et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de border-collapse. Mais dans le cas de border-collapse cela ne fera pas de différence.

Exemple interactif.

Compatibilité avec les navigateurs.

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

1

Propriété
border-collapse

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété border-collapse.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Concernant border-collapse. Introduction de la propriété border-collapse dans la spécification CSS version 2.xx.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Tableaux - Niveau 3

  Concernant border-collapse. Pas de changement concernant la propriété border-collapse.
  

  25 Octobre 2016

  Document de travail.

  

  

  

Voir aussi, au sujet des tableaux.

La spécification du W3C "Module CSS - Tableaux" regroupe les définition concernant spécifiquement les tableaux, mais de nombreuses propriétés plus générales peuvent s'appliquer aux tableaux marges, couleurs, etc., ou aux cellules : dimensions, etc.

Propriétés :