recherche

Maison >interface Web >tutoriel CSS >Comment puis-je créer une structure de type tableau en utilisant uniquement des Divs et du CSS ?

Comment puis-je créer une structure de type tableau en utilisant uniquement des Divs et du CSS ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-11 12:10:15707parcourir

How Can I Create a Table-Like Structure Using Only Divs and CSS?

Utilisation de

et CSS pour créer un tableau

Vous pouvez créer une structure de type tableau en utilisant uniquement le

élément et propriétés CSS. Voici comment procéder :

Code HTML :

<div class="div-table">
  <div class="div-table-row">
    <div class="div-table-col">Customer ID</div>
    <div class="div-table-col">Customer Name</div>
    <div class="div-table-col">Customer Address</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">001</div>
    <div class="div-table-col">002</div>
    <div class="div-table-col">003</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">xxx</div>
    <div class="div-table-col">yyy</div>
    <div class="div-table-col">www</div>
  </div>
  <div class="div-table-row">
    <div class="div-table-col">ttt</div>
    <div class="div-table-col">uuu</div>
    <div class="div-table-col">Mkkk</div>
  </div>
</div>

Style CSS :

/* Table Container Styling*/
.div-table {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}

/* Table Rows Styling*/
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

/* Table Cells Styling*/
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-cell;
  width: 200px;
  background-color: #ccc;
}

Par En appliquant ces styles, vous pouvez créer une disposition de tableau en utilisant uniquement l'attribut

, sans avoir besoin de l'élément et éléments. Le résultat sera visuellement similaire à un tableau HTML traditionnel, mais il aura une mise en page flexible et réactive.

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 for using table tr
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 créer une barre de navigation Bootstrap 4 à deux rangées avec des menus empilés verticalement ?Article suivant：Comment créer une barre de navigation Bootstrap 4 à deux rangées avec des menus empilés verticalement ?

Articles Liés

Voir plus