Comment supprimer les bordures répétées d'un tableau en CSS

En CSS, vous pouvez utiliser l'attribut border-collapse pour supprimer les bordures répétées dans le tableau. Cet attribut peut définir si la bordure du tableau est réduite en une seule bordure ou séparée. Il vous suffit de définir la valeur à réduire pour fusionner le. Bordures qui se chevauchent Ensemble, elles forment une bordure pour obtenir l'effet d'une bordure à une seule ligne.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Problème de chevauchement après avoir défini les bordures dans le tableau

table{
 border-spacing: 0;
 border-collapse: collapse;
}
table td {          
 border: 1px solid #000;
 padding: 20px 30px;
}

Dans le tableau, lorsque nous ajoutons des bordures et supprimons les marges de chaque cellule, le formulaire aura un problème de bordures qui se chevauchent, ce qui rend les lignes de bordure épaisses et déformées. , nous pouvons alors définir border-collapse: collapse pour définir la bordure, qui fusionne les bordures qui se chevauchent en une seule bordure pour obtenir l'effet d'une bordure sur une seule ligne.

Rendu :

Description :

L'attribut border-collapse définit si les bordures du tableau sont fusionnées en une seule bordure ou affichées séparément comme dans le HTML standard.

Valeur d'attribut :

• séparée Valeur par défaut. Les frontières seront séparées. Les propriétés border-spacing et empty-cells ne sont pas ignorées.

• collapse Les bordures seront fusionnées en une seule bordure si possible. Les propriétés border-spacing et empty-cells sont ignorées.​​

Introduction connexe :

border est l'abréviation de l'attribut border.

La propriété CSS border est utilisée pour spécifier le style, la largeur et la couleur de la bordure de l'élément.

Les propriétés qui peuvent être définies sont (dans l'ordre) : border-width, border-style et border-color.

Vous pouvez également définir une seule valeur, par exemple border : #FF0000; est correct, et les autres valeurs seront définies sur les valeurs initiales des attributs correspondants.

Format de syntaxe

La propriété border peut être spécifiée en utilisant une, deux ou trois valeurs répertoriées ci-dessous, l'ordre des valeurs n'a pas d'importance :

/* 边框样式 */
border: solid;
/* 边框宽度 | 边框样式 */
border: 2px dotted;
/* 边框样式 | 边框颜色 */
border: outset #f33;
/* 边框宽度 | 边框样式 | 边框颜色 */
border: medium dashed green;
/* 全局值 */
border: inherit;
border: initial;
border: unset;

Remarque : Si le style de la bordure n'est pas défini, il ne le sera pas. être visible. En effet, les styles par défaut sont aucun.

Recommandations associées : "Tutoriel vidéo CSS"

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!