Comment utiliser l'attribut CSS border-collapse pour résoudre le problème de bordure de table

Lorsque nous faisons la mise en page, en plus des images et du texte, le tableau le plus utilisé est le tableau. Pour beaucoup de gens, la bordure du tableau est assez gênante, personnellement, je déteste le voir avec plusieurs calques. les bordures sont extrêmement laides, alors savez-vous comment définir la bordure de la table ? Aujourd'hui je vais vous parler de l'attribut border-collapse en CSS. Cet attribut est très pratique, mais beaucoup de gens ne le connaissent pas encore. Venez y jeter un oeil.

Généralement, nous écrivons un tableau, qui s'écrit comme suit, donnez au tableau une bordure et le style que vous souhaitez. Le code est le suivant :

Partie HTML :

<table class="aa">
   <thead>
    <tr>
     <th>序号</th>
     <th>姓名</th>
     <th>性别</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>张晗</td>
     <td>男</td>
     <td>23</td>
    </tr>
    <tr>
     <td>2</td>
     <td>陆颖</td>
     <td>女</td>
     <td>20</td>
    </tr>
    <tr>
     <td>3</td>
     <td>郝婷婷</td>
     <td>女</td>
     <td>19</td>
    </tr>
   </tbody>
  </table>

.

Partie CSS :

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}
.aa th,.aa td{border: 1px solid #ccc;padding: 10px;}

Regardez, l'effet est comme ceci :

Cela n'est pas conforme à notre compréhension du tableau. Comment se fait-il qu'il y ait autant de lignes de bordure supplémentaires ? Généralement, nous n'avons besoin que de la bordure extérieure et de la partie partagée par les cellules, et nous n'avons pas besoin d'avoir une bordure pour chacune ? cellule. Alors comment supprimer ces frontières supplémentaires ? Vient ensuite le point central d'aujourd'hui L'attribut CSS border-collapse peut nous aider à supprimer les bordures inutiles.

Tout d'abord, jetons un coup d'œil à la description de la valeur de l'attribut border-collapse. Il a deux valeurs. Séparer est la valeur par défaut. Les bordures sont séparées et non fusionnées. Si elles sont adjacentes, elles partagent une bordure tout à l'heure.

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}

Photo :

Vous le voyez ? Lorsque nous appliquons border-collapse: collapse au tableau, les bordures du tableau fusionnent et deviennent beaucoup plus belles. Vous pouvez utiliser cet attribut dans des travaux futurs, c'est très utile. Il est recommandé aux amis de l'essayer eux-mêmes, en particulier aux débutants. J'espère que cet article pourra vous aider !

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!