Je veux créer un tableau uniquement en utilisant des <div>balises et CSS.
Ceci est mon exemple de tableau.
<body>
<form id="form1">
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">003</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
</form>
</body>Et le style:
<style type="text/css">
.divTable
{
display: table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;/*cellspacing:poor IE support for this*/
/* border-collapse:separate;*/
}
.divRow
{
display:table-row;
width:auto;
}
.divCell
{
float:left;/*fix for buggy browsers*/
display:table-column;
width:200px;
background-color:#ccc;
}
</style>Mais ce tableau ne fonctionne pas avec IE7 et la version inférieure.Veuillez me donner votre solution et vos idées. Merci.
divpour créer une table?divsont plus flexibles que les tables!Réponses:
Extrait exécutable:
Afficher l'extrait de code
la source
divs ne doit pas être utilisé pour les données tabulaires. C'est tout aussi faux que d'utiliser des tableaux pour la mise en page.Utilisez un
<table>. C'est facile, sémantiquement correct, et vous aurez terminé en 5 minutes.la source
C'est un vieux fil, mais j'ai pensé que je devrais poster ma solution. J'ai récemment rencontré le même problème et la façon dont je l'ai résolu est de suivre une approche en trois étapes, comme indiqué ci-dessous, qui est très simple sans CSS complexe. .
(REMARQUE: bien sûr, pour les navigateurs modernes, l'utilisation des valeurs de table ou table-row ou table-cell pour l'attribut CSS d'affichage résoudrait le problème. Mais l'approche que j'ai utilisée fonctionnera aussi bien dans les navigateurs modernes qu'anciens car elle ne le fait pas utilisez ces valeurs pour afficher l'attribut CSS.)
APPROCHE SIMPLE EN 3 ÉTAPES
Pour un tableau avec des div uniquement afin d'obtenir des cellules et des lignes comme dans un élément de tableau, utilisez l'approche suivante.
.tableclasse).rowclasse).cellclasse)MISE À JOUR 1
Pour contourner l'effet de ne pas maintenir la même largeur dans toutes les cellules d'une colonne comme mentionné par
thatslchdans un commentaire, on pourrait adopter l'une des deux approches ci-dessous.Spécifiez une largeur pour la
cellclassecellule {affichage: bloc en ligne; largeur: 340 px;}
Utilisez le CSS des navigateurs modernes comme ci-dessous.
.table {affichage: table; } .row {display: table-row;} .cell {display: table-cell;}
la source
S'il y a quelque chose que
<table>vous n'aimez pas, vous pouvez peut-être utiliser le fichier de réinitialisation ?ou
si vous en avez besoin pour la mise en page de la page, consultez les exemples de mise en page cssplay pour concevoir des sites Web sans tableaux.
la source
Je ne vois aucune réponse compte tenu de Grid-Css. Je pense que c'est une approche très élégante: grid-css prend même en charge les travées de lignes et de colonnes. Ici vous pouvez trouver un très bon article:
https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611
la source
Utilisez le bon type de document; cela résoudra le problème. Ajoutez la ligne ci-dessous en haut de votre fichier HTML:
la source
Un peu OFF-TOPIC, mais peut aider quelqu'un pour un HTML plus propre ... CSS
HTML
Fonctionne sur Chrome et Firefox
la source
<div>éléments? Vous voulez probablement.common_table div > divEn créant un ensemble personnalisé de balises de mise en page, j'ai trouvé une autre réponse à ce problème. Vous trouverez ici l'ensemble personnalisé de balises et leurs classes CSS.
HTML
CSS
La clé pour obtenir des cellules vides et des cellules en général de la bonne taille est le dimensionnement et le remplissage des boîtes. Border fera également la même chose, mais crée une ligne dans la ligne. Le rembourrage ne le fait pas. Et, même si je ne l'ai pas essayé, je pense que Margin agira de la même manière que Padding, en forçant et vider la cellule pour qu'elle soit rendue correctement.
la source