Maison > Article > interface Web > Comment utiliser l'attribut border-collapse

Comment utiliser l'attribut border-collapse

青灯夜游original: 2019-02-16 09:56:306912parcourir

L'attribut border-collapse est utilisé pour les éléments du tableau. Vous pouvez définir les deux bordures du tableau pour qu'elles fusionnent en une seule bordure.

Propriété CSS border-collapse

propriété border-collapse définit si la bordure de la table est fusionné en une seule bordure ou des affichages séparés comme dans le HTML standard.

Il a deux valeurs :

séparé : Valeur par défaut, les bordures sont séparées ; chaque cellule affichera sa propre bordure

réduire : Si possible , les bordures seront fusionnées en une seule bordure (pour le moment, les propriétés border-spacing et empty-cells n'ont aucun effet).

Remarque : Tous les principaux navigateurs prennent en charge l'attribut border-collapse.

Remarque : l'attribut border-collapse, si !DOCTYPE n'est pas spécifié, peut produire des effets inattendus.

Exemple d'utilisation de l'attribut CSS border-collapse :

Ce qui suit est un exemple de code simple pour voir comment utiliser border-collapse attribut :

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
      <style type = "text/css">
      .box{
      width: 400px;
      margin: 100px auto;
      }
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding:10px 50px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px 50px;
         }
      </style>
   </head>
   <body>
   <div class="box">
      <table class = "one">
         <caption>边框折叠示例</caption>
         <tr><td class = "a">单元格A折叠示例</td></tr>
         <tr><td class = "b">单元格B折叠示例</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>边框分隔示例</caption>
         <tr><td class = "a">单元格A分隔示例</td></tr>
         <tr><td class = "b">单元格B分隔示例</td></tr>
      </table>
    </div>
   </body>
</html>

Rendu :

Comment utiliser lattribut border-collapse

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!

css html border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la propriété CSS align-contentArticle suivant：Comment utiliser la propriété CSS align-content

Comment utiliser l'attribut border-collapse

Articles Liés