Maison > Article > interface Web > Comment utiliser la propriété CSS border-collapse
Comment utiliser la propriété CSS border-collapse
- 青灯夜游original
- 2019-05-30 09:34:054303parcourir
L'attribut border-collapse est utilisé pour les éléments du tableau et peut être utilisé pour fusionner les deux bordures du tableau en une seule bordure. Tous les principaux navigateurs prennent en charge l'attribut border-collapse.
Comment utiliser la propriété css border-collapse ?
L'attribut border-collapse définit si les bordures du tableau sont réduites en une seule bordure ou affichées séparément comme dans le HTML standard.
Syntaxe :
border-collapse: separate|collapse|inherit;
Valeur de l'attribut :
● séparé : 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.
●Réduire : Si possible, les bordures seront fusionnées en une seule bordure. Les propriétés border-spacing et empty-cells sont ignorées.
● hériter : Spécifie que la valeur de l'attribut border-collapse doit être héritée de l'élément parent.
Remarque : Tous les principaux navigateurs prennent en charge l'attribut border-collapse. La valeur d'attribut « inherit » n'est prise en charge dans aucune version d'Internet Explorer (y compris IE8). Si !DOCTYPE n'est pas spécifié, border-collapse peut produire des résultats inattendus.
Exemple d'attribut CSS border-collapse
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table{
border-collapse:collapse;
}
table, td, th{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Bill</td>
<td>20</td>
</tr>
<tr>
<td>Steven</td>
<td>25</td>
</tr>
</table>
</body>
</html>Rendu :
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!