Come creare una tabella usando solo il tag <div> e Css

182

Voglio creare una tabella usando solo <div>tag e CSS.

Questa è la mia tabella di esempio.

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

E stile:

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

Ma questa tabella non funziona con IE7 e versioni precedenti. Fornisci la tua soluzione e le mie idee. Grazie.

html css

— Kumara
fonte

dai un'occhiata a questo articolo

— tanathos,

32

perché vuoi usare divper creare una tabella?

— huy,

3

leggi il buon articolo "Le tabelle CSS sono migliori delle tabelle HTML?" [ vanseodesign.com/css/tables/]

— vladimir

5

Penso che il motivo per cui qualcuno vuole usare una tabella basata su div invece di una tabella normale è che .... il rendering / animazioni / reflow su una tabella basata su div è in realtà più veloce (specialmente per grandi dimensioni DOM) rispetto al rendering di una tabella normale. ..... vedi questo .... stubbornella.org/content/2009/03/27/… questo .... developer.nokia.com/community/wiki/… sopra che tutti i plugin javascript ad alta intensità di dati come slickgrid ecc. usa divBasedtable

— bhavya_w,

1

@huy Probabilmente perché le divs sono più flessibili delle tabelle!

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

Snippet eseguibile:

Mostra snippet di codice

.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>

Espandi frammento

— Shiva Komuravelly
fonte

224

Grazie! Qualcuno che ha effettivamente risposto alla sua domanda e non ha semplicemente detto che "è un'idea stupida". Lo odio quando le persone non rispondono alle domande ... Se lo facesse, si dovrebbe rispondere

— Brian Leishman,

23

@stumpx: a volte la risposta corretta è "non farlo". Questa è una di quelle volte. Quando devi chiedere "come faccio a creare una tabella usando div e CSS", hai uno dei due problemi: o stai facendo la domanda sbagliata o stai cercando di fare la cosa sbagliata.

— cHao,

28

@cHao Se pensi che dovrebbe essere la risposta, allora ignorala e lascia che qualcuno che vuole effettivamente rispondere alla domanda risponda.

— Brian Leishman,

14

@stumpx: se penso che non si debba rispondere alla domanda , voto per chiudere, perché la domanda non dovrebbe nemmeno esistere. Tutte le domande valide meritano una risposta. Ma come ho detto, a volte la risposta più corretta è "non farlo". È bene consigliare qualcuno su come risolvere il problema sbagliato? È bello restare pigramente mentre altri offrono un simile consiglio? Dico di no

— cHao,

5

Se non sai cosa ha in testa il tuo progettista, lasciare i dati nella struttura div come sopra è molto meglio che lasciarli nella tabella. Meglio significa che è più facile convertire da div fluttuanti in tabelle che viceversa.

— Anatoly Techtonik,

96

divs non dovrebbe essere usato per dati tabulari. È sbagliato quanto usare le tabelle per il layout.
Usa a <table>. È facile, semanticamente corretto, e lo farai in 5 minuti.

— Kobi
fonte

8

può dipendere dall'applicazione però. a volte ciò che appare tabulare può essere lineare, sebbene diviso. Ad esempio i calendari possono avere i loro vantaggi come div anziché tabelle

— Dan

2

@Dann: potrebbero avere dei vantaggi come elenco , ma un sacco di div è semanticamente altrettanto cattivo di una tabella di layout.

— cHao,

4

ci sono diverse ragioni per cui stiamo chiedendo che il tavolo venga disegnato con i DIV. Uno dei quali utilizza il tag di tabella in SharePoint 2007 confonde tutti i contenuti presenti nella pagina

— Shiva Komuravelly,

2

@simplyletgo: Semanticamente, sarebbe più appropriato definire le celle di una tabella come blocchi piuttosto che provare a fare in modo che i div si comportino come una tabella.

— cHao,

1

perchè no? se usi le tabelle non puoi aggiungere una barra di scorrimento attorno a determinate celle in modo che la tua tabella abbia intestazioni bloccate simili a Excel, ad esempio. Le tabelle hanno molti limiti, perché non è possibile farlo con i div?

— pilavdzice,

9

Questo è un vecchio thread, ma ho pensato di pubblicare la mia soluzione. Di recente ho affrontato lo stesso problema e il modo in cui l'ho risolto è seguendo un approccio in tre fasi, come indicato di seguito, che è molto semplice senza alcun CSS complesso .

(NOTA: Naturalmente, per i browser moderni, l'utilizzo dei valori di tabella o tabella-riga o tabella-cella per visualizzare l'attributo CSS risolverebbe il problema. Ma l'approccio che ho usato funzionerà altrettanto bene nei browser moderni e precedenti poiché non lo fa usa questi valori per visualizzare l'attributo CSS.)

APPROCCIO SEMPLICE IN 3 FASI

Per una tabella con div solo in modo da ottenere celle e righe proprio come in un elemento tabella, utilizzare il seguente approccio.

Sostituisci l'elemento tabella con un div block (usa una .tableclasse)
Sostituisci ogni elemento tr o th con un div block (usa una .rowclasse)
Sostituisci ogni elemento td con un div di blocco inline (usa una .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>

Espandi frammento

AGGIORNAMENTO 1

Per aggirare l'effetto della stessa larghezza che non viene mantenuto su tutte le celle di una colonna come menzionato thatslchin un commento, si potrebbe adottare uno dei due approcci seguenti.

Specifica una larghezza per la cellclasse

cell {display: inline-block; larghezza: 340px;}
Usa i CSS dei browser moderni come di seguito.

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

— Sunil
fonte

1

Questo non lo farà poiché le colonne non hanno le stesse dimensioni.

— Quello è il

Hai ragione sulla larghezza che non si comporta come in un elemento tabella. Tuttavia, se specifichi una larghezza per la classe .cell nel suo CSS come .cell {width: 300px;} allora potresti ottenere un effetto simile. Tuttavia, la limitazione menzionata sarà sempre presente quando si utilizza div a meno che non si definisca una larghezza per la classe CSS della cella. UN ALTRO modo di ottenere lo stesso effetto sarebbe usare le seguenti classi: <style> .table {display: table; } .row {display: table-row;} .cell {display: table-cell;} </style> invece di usare le classi menzionate nella risposta sopra.

— Sunil,

@thatsIch, ho aggiunto AGGIORNAMENTO 1 nella mia risposta che spiega la soluzione alternativa per il problema di larghezza che hai menzionato

— Sunil

4

Se c'è qualcosa <table>che non ti piace, forse potresti usare il file di reset ?

o

se necessario per il layout della pagina, consultare gli esempi di layout di cssplay per la progettazione di siti Web senza tabelle.

— Urszula Karzelek
fonte

3

Non vedo alcuna risposta considerando Grid-Css. Penso che sia un approccio molto elegante: grid-css supporta anche l'intervallo di righe e gli intervalli di colonne. Qui puoi trovare un ottimo articolo:

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

— Zardo
fonte

2

Usa il tipo di documento corretto; risolverà il problema. Aggiungi la riga seguente all'inizio del tuo file HTML:

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

— abcd
fonte

2

Un po 'OFF-TOPIC, ma può aiutare qualcuno per un HTML più pulito ... 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>

Funziona su Chrome e Firefox

— Harijs Krūtainis
fonte

2

E se le celle della tua tabella contengono degli <div>elementi? Probabilmente vuoi.common_table div > div

— vol7ron

2

Nella creazione di un set personalizzato di tag di layout, ho trovato un'altra risposta a questo problema. Qui viene fornito il set personalizzato di tag e le relative classi 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 chiave per ottenere le celle vuote e le celle in generale per avere la giusta dimensione, è il ridimensionamento e l'imbottitura della scatola. Border farà anche la stessa cosa, ma crea una linea nella riga. L'imbottitura no. E, anche se non l'ho provato, penso che Margin agirà allo stesso modo di Padding, forzando e svuotando correttamente le celle vuote.

— E Net Arch
fonte