Maison  >  Article  >  interface Web  >  Comment fusionner des cellules en CSS

Comment fusionner des cellules en CSS

藏色散人
藏色散人original
2020-11-17 13:44:399250parcourir

Comment fusionner des cellules en CSS : créez d'abord un exemple de fichier HTML ; puis fusionnez les colonnes en définissant colspan ; enfin fusionnez les lignes en définissant rowspan.

Comment fusionner des cellules en CSS

Recommandé : "Tutoriel vidéo CSS"

Cellules fusionnées de table CSS

colspan est une colonne fusionnée et rowspan est une ligne fusionnée, telle que rowspan="2", sa ligne suivante tr aura une colonne de moins lors de la fusion de colonnes colspan="2", les colonnes de cette ligne sera Il y aura une colonne de moins

<table border="1" style={{margin:200}}>
      <tbody>
        <tr>
          <th colspan="2">我是占位符</th>
          <th colspan="2">我是占位符</th>
        </tr>
        <tr>
          <th rowspan="2">我是占位符</th>
          <th>我是占位符</th>
          <th>我是占位符</th>
          <th>我是占位符</th>
        </tr>
        <tr>
          <th>我是占位符</th>
          <th>我是占位符</th>
          <th>我是占位符</th>
        </tr>
      </tbody>
    </table>

Effet

Comment fusionner des cellules en CSS

en-tête de barre oblique CSS3

<td >
    <div class="biaoTou">       
    </div>
</td>
.biaoTou {  
  border-top: 200px #199fff solid; /*上边框宽度等于表格第一行行高*/  
  border-left: 200px #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/  
}

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!

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