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

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>

Copier après la connexion

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;
}

Copier après la connexion

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!

source：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 puis-je modifier les couleurs des puces de la liste sans affecter le contenu des éléments de la liste ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2470

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2616

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2202

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...