Comment créer une table uniquement en utilisant la balise <div> et Css

182

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.

html css

— Kumara
source

jetez un oeil à cet article

— tanathos

32

pourquoi voulez-vous utiliser divpour créer une table?

— huy

3

voir le bon article "Les tableaux CSS sont-ils meilleurs que les tableaux HTML?" [ vanseodesign.com/css/tables/]

— vladimir

5

Je pense que la raison pour laquelle quiconque veut utiliser une table basée sur div au lieu d'une table normale est que ... le rendu / animations / reflows sur une table basée sur div est en fait plus rapide (en particulier pour une grande taille DOM) que le rendu d'une table normale. ..... voir ceci .... stubbornella.org/content/2009/03/27/ ... this .... developer.nokia.com/community/wiki/ ... au-dessus de tous les plugins javascript gourmands en données comme slickgrid etc use divBasedtable

— bhavya_w

1

@huy Probablement parce que les tables divsont plus flexibles que les tables!

— Kai Noack

262

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Extrait exécutable:

Afficher l'extrait de code

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">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>
  </form>
</body>

Développer l'extrait

— Shiva Komuravelly
source

224

Je vous remercie! Quelqu'un qui a réellement répondu à sa question et pas seulement dit que "c'est une idée stupide". Je déteste quand les gens ne répondent pas aux questions ... S'il le posait, il faudrait y répondre

— Brian Leishman

23

@stumpx: Parfois, la bonne réponse est "ne faites pas ça". C'est l'une de ces fois. Lorsque vous devez demander "comment créer un tableau en utilisant divs et CSS", vous avez un des deux problèmes suivants: soit vous posez la mauvaise question, soit vous essayez de faire la mauvaise chose.

— cHao

28

@cHao Si vous pensez que cela devrait être la réponse, ignorez-la et laissez quelqu'un qui veut vraiment répondre à la question y répondre.

— Brian Leishman

14

@stumpx: Si je pense que la question ne devrait pas trouver de réponse , je vote pour fermer - parce que la question ne devrait même pas exister. Toutes les questions valides méritent une réponse. Mais comme je l'ai dit, parfois la réponse la plus correcte est "ne le faites pas". Est-il bon de conseiller quelqu'un sur la façon de résoudre le mauvais problème? Est-il bon de rester les bras croisés pendant que d' autres offrent de tels conseils? Je dis NON.

— cHao

5

Si vous ne savez pas ce que votre concepteur a en tête, il vaut mieux laisser des données dans une structure div comme ci-dessus que de les laisser dans un tableau. Mieux signifie qu'il est plus facile de convertir des div flottantes en tables et vice versa.

— anatoly techtonik

96

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.

— Kobi
source

8

peut dépendre de l'application cependant. parfois, ce qui apparaît sous forme de tableau peut être linéaire, bien que divisé. Par exemple, les calendriers peuvent avoir leurs avantages en tant que divs au lieu de tables

— Dan

2

@Dann: Ils peuvent avoir des avantages en tant que liste , mais un tas de divs est sémantiquement aussi mauvais qu'un tableau de disposition.

— cHao

4

il y a plusieurs raisons pour lesquelles nous demandons que la table soit désignée avec les DIV. L'une d'elles utilise une balise de table dans SharePoint 2007 pour perturber chaque contenu présent dans la page

— Shiva Komuravelly

2

@simplyletgo: sémantiquement, il serait plus approprié de styliser les cellules du tableau comme des blocs que d'essayer de faire en sorte que les div agissent comme un tableau.

— cHao

1

pourquoi pas? si vous utilisez des tableaux, vous ne pouvez pas ajouter une barre de défilement autour de certaines cellules afin que votre tableau ait des en-têtes verrouillés de type Excel, par exemple. Les tables ont beaucoup de limitations, pourquoi cela ne peut-il pas être fait avec les divs?

— pilavdzice

9

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.

Remplacez l'élément de table par un bloc div (utilisez une .tableclasse)
Remplacez chaque élément tr ou th par un bloc div (utilisez une .rowclasse)
Remplacez chaque élément td par un bloc div inline (utilisez une .cellclasse)

.table {display:block; }
.row { display:block;}
.cell {display:inline-block;}

    <h2>Table below using table element</h2>
    <table cellspacing="0" >
       <tr>
          <td>Mike</td>
          <td>36 years</td>
          <td>Architect</td>
       </tr>
       <tr>
          <td>Sunil</td>
          <td>45 years</td>
          <td>Vice President aas</td>
       </tr>
       <tr>
          <td>Jason</td>
          <td>27 years</td>
          <td>Junior Developer</td>
       </tr>
    </table>
    <h2>Table below is using Divs only</h2>
    <div class="table">
       <div class="row">
          <div class="cell">
             Mike
          </div>
          <div class="cell">
             36 years
          </div>
          <div class="cell">
             Architect
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Sunil
          </div>
          <div class="cell">
             45 years
          </div>
          <div class="cell">
             Vice President
          </div>
       </div>
       <div class="row">
          <div class="cell">
             Jason
          </div>
          <div class="cell">
             27 years
          </div>
          <div class="cell">
             Junior Developer
          </div>
       </div>
    </div>

Développer l'extrait

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 cellclasse

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

— Sunil
source

1

Cela ne le fera pas car les colonnes ne sont pas de la même taille.

— thatsIch

Vous avez raison sur le fait que la largeur ne se comporte pas comme dans un élément de tableau. Cependant, si vous spécifiez une largeur pour la classe .cell dans son CSS comme .cell {width: 300px;} alors vous pourriez obtenir un effet similaire. Mais, la limitation que vous avez mentionnée sera toujours présente lors de l'utilisation de div, sauf si vous définissez une largeur pour la classe CSS de cellule. UNE AUTRE façon d'obtenir le même effet serait d'utiliser les classes suivantes: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </style> au lieu d'utiliser les classes mentionnées dans la réponse ci-dessus.

— Dimanche

@thatsIch, j'ai ajouté UPDATE 1 dans ma réponse qui explique la solution de contournement pour le problème de largeur que vous avez mentionné

— Sunil

4

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.

— Urszula Karzelek
source

3

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

— Zardo
source

2

Utilisez le bon type de document; cela résoudra le problème. Ajoutez la ligne ci-dessous en haut de votre fichier HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

— a B c d
source

2

Un peu OFF-TOPIC, mais peut aider quelqu'un pour un HTML plus propre ... CSS

.common_table{
    display:table;
    border-collapse:collapse;
    border:1px solid grey;
    }
.common_table DIV{
    display:table-row;
    border:1px solid grey;
    }
.common_table DIV DIV{
    display:table-cell;
    }

HTML

<DIV class="common_table">
   <DIV><DIV>this is a cell</DIV></DIV>
   <DIV><DIV>this is a cell</DIV></DIV>
</DIV>

Fonctionne sur Chrome et Firefox

— Harijs Krūtainis
source

2

Et si les cellules de votre tableau contiennent des <div>éléments? Vous voulez probablement.common_table div > div

— vol7ron

2

En 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

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

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.

— E Net Arch
source