Come creare la tabella utilizzando solo <div> tag e Css

Voglio creare la tabella utilizzando 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 sotto la versione.Si prega di dare la propria soluzione e idee per me.
Grazie.

  • dai un’occhiata a questo articolo
  • perché vuoi usare div per creare una tabella?
  • controllare questo link per favore, potrebbe essere un buon aiuto
  • Una cosa che si potrebbe desiderare di notare è la tua class=”headRow” è definito come .divRow nel tuo CSS. Ho pensato di sottolineare che.
  • vedere bene l’articolo ‘CSS Tabelle Meglio Di Tabelle HTML?’ [vanseodesign.com/css/tables/]
  • Credo che la ragione per chiunque desidera utilizzare un div in base tavolo invece di un tavolo normale, è che….rendering/animazioni/fluisce in un div in base tabella è effettivamente più veloce ( esp. per i grandi DOM dimensioni) rispetto al rendering di un tavolo normale……vedere questo….stubbornella.org/content/2009/03/27/… questo….developer.nokia.com/community/wiki/… al di sopra di tutti i dati per la cpu javascript plugin come slickgrid ecc utilizzare divBasedtable
  • Solo una piccola correzione: display:table-column dovrebbe essere utilizzato per simulare il <col> tag, per imitare il <td> utilizzare display: table-cell
  • Un’altra correzione: se la tabella non si adattano allo schermo, quindi le vostre cellule, verrà a capo. Motivo: il float: left è la colpa. Vedi anche: stackoverflow.com/questions/30001848/…
  • “Progettare senza tabelle” Andrea/Schaeffer è di 300 pagine del libro scritto sui benefici di evitare le tabelle nella maggior parte dei casi. Il primo capitolo o così delinea i molti vantaggi di evitare tabelle.
  • Probabilmente perché divs sono più flexin grado di tabelle!

InformationsquelleAutor Kumara | 2010-06-16

 

8 Replies
  1. 245
    .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;  
    }

    Eseguibile frammento:

    CSS:

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

    HTML:

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

    • Grazie! Qualcuno che l’ha effettivamente risposto alla sua domanda e non basta dire che “è un’idea stupida.” Io odio quando la gente non rispondere alle domande… Se lo ha chiesto, dovrebbe essere risposto
    • A volte la risposta corretta è “non fare quello”. Questa è una di quelle volte. Quando si dispone di chiedere “come faccio a creare una tabella con i div e i CSS”, si hanno due problemi: o stai facendo la domanda sbagliata, o stai cercando di fare la cosa sbagliata.
    • Se si pensa che debba essere la risposta per poi ignorarlo e lasciare che qualcuno che in realtà vuole rispondere alla domanda che la risposta.
    • Se penso che la questione che non dovrebbe essere una risposta, io voto per chiudere, perché la domanda non dovrebbe nemmeno esistere. Tutte valide le domande meritano una risposta. Ma come ho detto, a volte più risposta corretta è “non farlo”. È bene avvertire qualcuno a come risolvere il problema sbagliato? È bello stare a guardare mentre altri offrire ad un consiglio? Dico di no.
    • Se non si pensa che dovrebbe essere fatto, offrire un percorso alternativo con lo stesso risultato. in drupal per esempio, a volte le tabelle di non prendere sul corretto formati e id/classe sarebbe più adatto per il lavoro.
    • Il percorso alternativo è quello di utilizzare una cavolo di tabella. Questo irrazionale odio di tabelle, in particolare per quello che è chiaramente dati tabulari, è il vero problema. Ottenere oltre che, e il problema chiedeva semplicemente svanisce. Le tabelle possono essere in stile, proprio come qualsiasi altro elemento, non ho mai avuto un problema loro di guardare a destra. E se non riesci a guardare a destra, allora si sta andando ad avere lo stesso problema con i div con display:table-whatever, perché utilizza lo stesso layout meccanismo.
    • Se non sai che cosa il vostro progettista ha in testa, al momento di lasciare i dati in div struttura come sopra è molto meglio che lasciarli in tabella. Meglio, è più semplice per la conversione da galleggianti div e tabelle che viceversa.
    • Se non sai che cosa il vostro progettista ha in mente, allora il miglior HTML è quello migliore dal punto di vista semantico rappresenta il contenuto. Non c’è nessun buon motivo per utilizzare un div in questo caso, è possibile lo stile di una tabella facilmente come è possibile che un mucchio di div. D’altra parte, styling div come una tabella coinvolge lavoro inutile, interruzioni di accessibilità, e non funziona in IE7.
    • parlando di IE7 è un atto di necrofilia. )
    • Solo in campo. Ho trovato questo, quando a cercare su google come fare la stessa cosa anche. Nel mio caso so che l’utilizzo di div per rappresentare i dati tabulari è un’idea orribile, ma ho a causa della limitazione del mio ambiente di sviluppo (storia lunga, personalizzati in casa roba), quindi ho bisogno di utilizzare div invece di tabella come una soluzione alternativa.
    • Francamente, poi, l’ambiente di sviluppo è gravemente rotto. Faresti meglio a correzione che stare in punta di piedi intorno al vero problema.
    • +1 per la lotta contro la folla.
    • Che cosa succede se si desidera integrare animazioni e simili? Le tabelle non sono del tutto favorevole per quell’effetto. Avrete bisogno di qualcosa di più personalizzabile.
    • Le righe superare il rettangolo su IE. Sapete come calzata?
    • Sto solo andando a dire questo… Come sono d’accordo con la difesa che le tabelle hanno il loro posto in HTML la struttura è obsoleta e non flessibile. Nel mio caso particolare ho per creare una struttura complessa di tabelle nidificate, con una tonnellata di extra markup che è completamente inutile e se il mio amato div in grado di creare la struttura di una tabella, come ho bisogno di essere ho intenzione di utilizzare oltre che inaffidabile struttura.
    • Non è una “struttura”; è una diabolica pasticcio. 🙂 E ‘ un layout di tabella. Grande, grande, grande differenza. Quando si utilizzano le tabelle di che cosa sono fatti per (rappresentare i dati che intrinsecamente e compatibile ha righe, colonne, intestazioni, etc), c’è ben poco (se ce ne sono!) nidificazione coinvolti.
    • Non sto dicendo che si dovrebbe usare le tabelle per il layout più di quanto sto dicendo che si dovrebbe usare i div per fare un tavolo-alike. Io sto dicendo che alcuni dati sono intrinsecamente tabulare — e cercando di fare un pasticcio di divs per rappresentare non è solo fare più lavoro per te, ma è semanticamente corretto.
    • Si tratta di quello che qualcuno ha bisogno. Dal momento che è possibile creare una serie di div e li usa in una tabella di layout come penso che sia utile. In tutta onestà, è possibile fare molto con un div struttura in stile come un tavolo, a sua volta, quando si rilascia per abbassare di dimensioni dello schermo, invece di avere tutta un’altra serie di informazioni per la dimensione si può solo modificare il css per essere un set diverso (non tabellari).. in ogni modo.. tabella di nidificazione è molto pratica restrittiva. Ma non da preferenze personali, a questo punto. Figurati, vorrei solo fare una leggera commento 🙂
    • Suona come si potrebbe pensare troppo in termini di quali sono gli elementi di aspetto. Che è sbagliata — CSS può fare quasi qualsiasi elemento, inclusi le celle di una tabella, un look molto simile a qualsiasi altro elemento. Utilizzare gli elementi destinati a che cosa il contenuto del rappresenta, e poi lo stile di quelli.
    • Alla fine si può dire di te… quasi.. non vado quasi. Vado identici. Posso fare qualsiasi elemento perfetto con i CSS. Quando ho limitato da qualcosa che mi trovi un modo per non avere limitazioni. Di nuovo.. solo una preferenza, a questo punto.
    • Se si può fare di ogni elemento perfetto con i CSS, quindi non avete scuse per evitare semanticamente corretto HTML. I div sono generici elementi del blocco, per quando il codice HTML non già un elemento di rappresentare la vostra roba. Quando è non hanno un tale elemento, si dovrebbe utilizzare che.
    • di nuovo. La preferenza. semanticamente corretto, purtroppo ha i suoi limiti, ancora. Se mi diventa un limite farò un piccolo sacrificio e creare qualcosa. In quello che ho detto prima, ho finito la creazione di una struttura di una tabella con la metà della quantità di css e la struttura di una tabella di mi ha costretto a fare. Purtroppo questo non è costruttivo più 🙁 quindi probabilmente dovremmo cadere e basta. 🙂
    • Sembra che ci sia qualche malinteso che l’utilizzo di tabelle significa non usare i CSS (o viceversa), o che i div sono più facili da stile. Si può facilmente utilizzare entrambi; stili CSS tavoli troppo. 🙂 Dire table, thead, tbody, tr, th, td { display: block; }, e ora il tuo tavolo è un gruppo di blocchi. Ma se si sta utilizzando tabelle correttamente, è anche un modo per distinguere tra “tabella” e “del gruppo di righe” e “riga” e “intestazione” e “dati” elementi-che è molto utile quando i dati è in realtà tabulare, e non richiede HTML. A differenza di div, che fondamentalmente richiedono una class attributo.
    • Ho usato per amore di tabelle e di chiedere perché qualcuno dovrebbe voler costruire delle griglie con i div…fino a quando ho iniziato a fare avanzati jquery roba. Hai mai provato a fare di fantasia jquery codifica con le celle di una tabella e il loro contenuto? Incubo. Div semplicemente non funzionano all’interno di celle di tabella, e si estende su problematiche lì, se si sta facendo qualcosa di avanzato. Per una pagina semplice, sicuro, vai con una tabella. Ma se avete bisogno di massima a grana fine e il controllo dinamico della griglia regioni, i div sono la strada da percorrere.
    • Grazie per questa risposta. E ‘ estremamente utile per quello che sto lavorando. Ho una situazione in cui ho una tabella, con i dati, ma non intestazioni, come parte del design dell’interfaccia utente che è stato dato a me. Per i requisiti di Accessibilità, ogni tabella deve avere le intestazioni, ma rompe il design nel mio caso. Utilizzando i div per creare la tabella mi permette di aggirare l’intestazione del requisito, mentre ancora di creare il look and feel per quello che la mia azienda vuole.
    • Ci sono applicazioni per un div-solo tavolo, per esempio io sto cercando di eseguire il rendering di una tabella il risultato discesa di un kendo completamento automatico dei widget e le tabelle non sono ammessi, così l’unico modo per farlo è quello di aggiungere tabelle, con il diritto di css per creare l’illusione di una tabella. A volte per produrre una buona ragione per cui qualcosa è applicabile è più faticoso di trovare la risposta alla domanda, perché non dovrebbe essere così rapidamente respinto. Solo perché non ha senso per voi, non rende non valido
    • Solo una piccola correzione: display:table-column dovrebbe essere utilizzato per simulare il <col> tag, per imitare il <td> utilizzare display: table-cell
    • Leishman Esattamente! Altrimenti non ci sarà alcuna innovazione. Come le altre persone sanno esattamente il motivo per cui ha bisogno per. E ‘ solo una supposizione che sanno tutto e che tutti dovrebbero seguire il loro parere, che nella maggior parte dei casi è SBAGLIATO! Questo è ciò che l’innovazione è! “Sto costruendo qualcosa di nuovo, e ho bisogno di aiuto con la parte del progetto. Che perché io sono qui! Di non avere esaminato e punito per una domanda!”.
    • Non è una buona ragione se la tabella è in realtà una tabella. Come ti fix dipende da come lo si sta facendo il drag/drop. Causa c’è qualcosa di rotto su di esso, e utilizzando i div, invece, non sta andando per guadagnare molto, se non altro.
    • Qualsiasi idea di Come può centrare la tabella principale, non il contenuto, proprio tavolo?
    • Il suo non è un crimine di utilizzare i div per creare le tabelle. Tutto dipende da cosa si sta facendo. Le tabelle sono buoni per la pianura di dati tabulari. Se avete in programma dinamico, jquery o js guidato e manipolabile dati e la struttura della tabella, quindi utilizzando i div vi darà la flessibilità che la tabella sarà necessario. Io non so perché qualcuno dovrebbe battaglia le opinioni di altre persone solo perché essi non si adattano il loro stile o preferenze. Non ristagnare con tavoli da solo, destreggiarsi con roba nuova e testare i risultati. Web dev shud essere un vivace,lungo viaggio esplorativo, godere mentre è dura!!
    • Ho appena pubblicato un residuo divRow classe nel frammento di codice.
    • Hai potuto lasciare le colonne scala con la larghezza della cella maggiore?
    • Grazie, chiara e pulita!
    • Cool. Come fare (verticale) si estende con i Div?
    • L’assunzione da parte di molti “basta usare una TABELLA” persone è che tutto il freddo CSS roba funziona pure su (dire) TR come si fa su DIV. L’ipotesi non è corretta. Prova a fare una “fisarmonica” open/close sul TR-è MOLTO più difficile che farlo su un DIV.

  2. 97

    divs non deve essere utilizzato per i dati tabulari. Che è altrettanto sbagliato come usare le tabelle per il layout.

    Utilizzare un <table>. La sua facile, semanticamente corretto, e si ‘ ll essere fatto in 5 minuti.

    • può dipendere dall’applicazione però. a volte ciò che appare tabellare può essere lineare, anche se divisi. Per esempio i calendari possono avere i loro vantaggi come i div invece tabelle
    • Essi potrebbero avere benefici come un elenco, ma un gruppo di div è semanticamente proprio così male come un tavolo.
    • ci sono diversi motivi per cui si chiede un tavolo per essere predisposta con DIV. Uno dei quali è l’uso di tag di tabella in microsoft SharePoint 2007 messess ogni contenuto presente nella pagina
    • ehi, sto ancora imparando, e di CSS/HTML styling e vuoi conoscere le migliori pratiche. Ho trovato questo perché stavo cercando di creare un contenitore di dati che mostrano elementi delle righe di una tabella in modalità “Desktop”, ma vorresti stampare gli elementi in verticale (più righe per elemento) quando in “Mobile” modalità. Questo potrebbe essere compiuto utilizzando @media tag override stili in base alle dimensioni dello schermo. Che cosa sarebbe la migliore pratica per la realizzazione di questo se non utilizzando i div che agiscono come una tabella in modalità Desktop, ma non in modalità Mobile?
    • Dal punto di vista semantico, sarebbe più appropriato stile celle della tabella, come blocchi di provare a fare i div agire come un tavolo.
    • perché no? se si utilizzano le tabelle non è possibile aggiungere una barra di scorrimento intorno a certe cellule, in modo che la tabella dispone di un excel-come bloccato intestazioni, ad esempio. Le tabelle sono un sacco di limiti, perché questo non può essere fatto con i div?
    • Si può, se hai una buona ragione per abbandonare le migliori pratiche…ma dovrebbe essere l’ultima risorsa. Div zero valore semantico, e dovrebbe esistere solo quando avete bisogno di un blocco a livello di elemento, ma non hanno un equivalente semantico. Se i dati effettivamente una tabella, quindi dovrebbe essere contrassegnato come uno til hai una dannata buona ragione per fare altrimenti.
    • Come per le limitazioni, le tabelle in realtà non sono che molti, se usato correttamente (naturalmente di dati in formato tabellare).
    • Mi mostra. Mi mostra questo mitico excel-come griglia che è molto più facile con i div. Causa io non ho visto. Per riferimento, Google Docs utilizza una tabella per i dati parte del suo foglio di calcolo app.
    • Ho guardato google docs origine e avevi ragione. Ora vedo come le tabelle possono essere usate per questo, grazie.
    • So che è tardi, ma grazie mille per questa risposta. Se c’è un’alternativa che segue migliori “pratiche” serve il richiedente e il sito, fornendo a quest’ultimo piuttosto che verso il basso-voto, la domanda che viene utilizzato troppo e dovrebbe richiedere una spiegazione invece di hit-and-run down senza diritto di voto). In realtà ho IMPARATO qualcosa leggendo questo, piuttosto che essere frustrato cercando un’altra risposta.
    • questa risposta è sempre corretto nel 2015 e css2/3 ?
    • Probabilmente non era troppo corretto nel 2010, per essere onesti.
    • umm … che cosa?
    • tabella sono buoni per tabulare i dati, ma non per il SEO, i Dati Gatherer dovrebbe considerare una bandiera sul tavolo, per contrassegnare come forma di dati, o la visualizzazione dei dati, in modo da può essere nuovamente utilizzato.
    • Ci sono cose che si possono fare a un DIV w CSS che non si può fare a una cella della tabella. Provate, per esempio, facendo un ‘fisarmonica’ su un tag TR per aprire e chiudere. È molto più difficile per il TR che per la DIV.

  3. 6

    Questo è un vecchio thread, ma ho pensato che dovrei postare la mia soluzione. Ho affrontato lo stesso problema di recente e l’ho risolto seguendo un approccio in tre fasi, come di seguito indicato , che è molto semplice, senza alcun complesso CSS.

    (NOTA : ovviamente, per i browser moderni, utilizzando i valori di tabella o di riga o di table-cell per la visualizzazione CSS attributo sarebbe risolvere il problema. Ma l’approccio che ho usato funziona altrettanto bene in moderni e vecchi browser perché non utilizzare questi valori per la visualizzazione CSS attributo.)

    3-STEP SEMPLICE APPROCCIO

    Per la tabella con i div, solo così si ottiene celle e righe, proprio come in un elemento di tabella utilizzare il seguente approccio.

    1. Sostituire l’elemento di tabella con un blocco div (uso un .table classe)
    2. Sostituire ogni tr o esimo elemento con un blocco div (uso un .row classe)
    3. Sostituire ogni elemento td con un inline block div (uso un .cell classe)

    CSS:

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

    HTML:

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

    AGGIORNAMENTO 1

    Per aggirare l’effetto della stessa larghezza non essere mantenuto in tutte le celle di una colonna, come indicato da thatslch in un commento, si potrebbe adottare uno dei due approcci di sotto.

    • Specificare una larghezza per cell classe

      cella {display:inline-block; width:340px;}

    • Utilizzare i CSS dei browser moderni, come di seguito.

      .tabella {display:table; }
      .riga { display:table-row;}
      .cella {display:table-cell;}

    • Questo non farlo dato che le colonne non sono della stessa dimensione.
    • Hai ragione circa la larghezza non comportarsi come un elemento di tabella. Tuttavia, se si specifica una larghezza per .cella di classe nel CSS come .cella { width: 300px;} allora si potrebbe ottenere un effetto simile. Ma, la limitazione che hai citato, sarà sempre lì quando si utilizza div a meno di non definire la larghezza della cella classe CSS. Un ALTRO modo di ottenere lo stesso effetto sarebbe quello di utilizzare le seguenti classi: <stile> .tabella {display:table; } .riga { display:table-row;} .cella {display:table-cell;} </stile> invece di usare le classi indicate nella sopra.
    • Ho aggiunto UPDATE 1 nella mia risposta che spiega la soluzione per la larghezza problema da te menzionato
  4. 2

    Utilizzare il corretto tipo di documento; che possa risolvere il problema. Aggiungere il seguente riga all’inizio del file HTML:

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

    Un po ‘ OFF-TOPIC, ma possono aiutare qualcuno per un pulitore di HTML…
    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

    • E se il vostro tavolo, le cellule hanno <div> elementi in loro? Probabilmente si desidera .common_table div > div
  6. 1

    Nella costruzione di un set personalizzato di layout tag, ho trovato un’altra risposta a questo problema. Di cui qui è l’abitudine serie di tag e le 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 celle, in generale, per essere la dimensione giusta, è Box-Sizing e Imbottitura. Confine farà la stessa cosa, ma crea una riga in riga. Imbottitura non. E, mentre io non l’ho provato, penso Margine agiscono allo stesso modo come Imbottitura, a forzare e cella vuota per essere renderizzate correttamente.

Lascia un commento