Maison >interface Web >tutoriel CSS >Comment puis-je créer une structure de type tableau en utilisant uniquement des Divs et du CSS ?
Utilisation de Vous pouvez créer une structure de type tableau en utilisant uniquement le Code HTML : Style CSS : Par En appliquant ces styles, vous pouvez créer une disposition de tableau en utilisant uniquement l'attribut 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!<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>
/* 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;
}
et
éléments. Le résultat sera visuellement similaire à un tableau HTML traditionnel, mais il aura une mise en page flexible et réactive. Articles Liés
Voir plus