La propriété border-collapse des bordures de cellules qui se chevauchent dans les tableaux CSS

Syntaxe : border-collapse : séparé | réduire

Valeur :
séparé : valeur par défaut. Indépendant des bordures (HTML standard)
Réduire : Les bords adjacents sont fusionnés

Description :
Définit ou récupère les bords des lignes et des cellules du table Que ce soit pour les fusionner ou les séparer selon le style HTML standard.
Cette propriété est en lecture seule pour l'objet currentStyle. Il est lisible et inscriptible par d'autres objets.
La fonctionnalité de script correspondante est borderCollapse .

Exemple :

table { border-collapse: separate; }

S'applique à :
IE5.0+ currentStyle runtimeStyle style TABLE

Exemple 1 : Style inutile

Ce qui suit est un fragment de citation :

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
</table>

Exemple 2 : Style d'effet

Ce qui suit est un fragment de citation :

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" style="border-collapse:collapse;">
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
</table>

table width=1 a déjà défini la largeur sur 1
us Le problème rencontré est le suivant : chaque ligne latérale td mesure 1 px et la ligne latérale de la table mesure également 1 px. Ensuite, lorsque deux td sont adjacents, parce que chaque ligne latérale td vaut 1, la "somme des largeurs" des lignes latérales lorsqu'elles entrent est 1+1=2. Même chose lorsque td et table sont adjacents.

effondrement : Les bords adjacents sont fusionnés

Les bords adjacents sont fusionnés ! Ce que j'ai dit auparavant, c'est 1+1=2 à cause du problème des arêtes adjacentes entre td et td, et entre td et table. Par défaut, les bords adjacents ne sont pas fusionnés, donc 1+1=2. Nous utilisons maintenant border-collapse:collapse pour les fusionner, donc la largeur est toujours de 1 px. Autrement dit, une fine bordure apparaît.

cellspacing est défini sur "0", et le résultat affiché est que la distance entre chaque cellule du premier tableau est de 0. Si la bordure du tableau est définie sur "0", la distance entre les cellules est 0
L'attribut cellpadding est utilisé pour spécifier la taille de la distance vide entre le contenu de la cellule et la bordure de la cellule
. La valeur du paramètre de cet attribut est également un nombre, qui représente le nombre de pixels occupés par la hauteur de la distance vide entre le contenu de la cellule et les bordures supérieure et inférieure et le nombre de pixels occupés par la largeur de la distance vide entre le contenu de la cellule. contenu de la cellule et les bordures gauche et droite.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!