Comment utiliser l'attribut border-collapse-tutoriel CSS-php.cn

Comment utiliser l'attribut border-collapse

青灯夜游

Libérer： 2019-02-16 09:56:30

original

6940 Les gens l'ont consulté

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.

Comment utiliser l'attribut border-collapse

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>

Copier après la connexion

Rendu :

Comment utiliser lattribut border-collapse