Div con display:table

**SDrago** · 05-07-2016, 14:35

Ciao a tutti.
Sto scrivendo un css che mi consenta di avere dei div che si comportano come le celle delle tabelle (quindi che abbiano la stessa altezza nella riga corrispondente) senza usare jquery.
Tutto sembra funzionare correttamente se non per il dettaglio che se ho una riga con tre celle di 25%-50%-25% ed un'altra con 4 celle al 25% mi risultano disallineate. Di seguito lo script.

CSS:

codice:

* {font-family:"Trebuchet MS",Arial,Sans-Serif;outline:none;}
html, body {margin:0;padding:0;background-color:rgba(221, 221, 221, 1);}

.tableswrapper {margin-top:0;margin-right:15%;margin-bottom:0;margin-left:15%;padding:0;background-color:rgba(0, 221, 221, 1);}

.tableswrapper div.table {width:calc(100% + 40px);display:table;margin-bottom:20px;margin-left:-20px;border-collapse:separate;border-spacing:20px 0;}

.tableswrapper div.table:last-child {margin-bottom:0;}
        
.tableswrapper div.table div.row {display:table-row;}

.tableswrapper div.table div.row div[class^='cellwidth'] {display:table-cell;empty-cells:hide;padding:20px;vertical-align:top;background-color:rgba(255, 255, 255, 1);}

.tableswrapper div.table div.row div[class^='cellwidth'] div.cellcontents h1.celltitle {margin:0;padding:0;color:red;font-size:150%;}

.tableswrapper div.table div.row div.cellwidth1{width:1%;}
.tableswrapper div.table div.row div.cellwidth2{width:2%;}
.tableswrapper div.table div.row div.cellwidth3{width:3%;}
.tableswrapper div.table div.row div.cellwidth4{width:4%;}
.tableswrapper div.table div.row div.cellwidth5{width:5%;}
.tableswrapper div.table div.row div.cellwidth6{width:6%;}
.tableswrapper div.table div.row div.cellwidth7{width:7%;}
.tableswrapper div.table div.row div.cellwidth8{width:8%;}
.tableswrapper div.table div.row div.cellwidth9{width:9%;}
.tableswrapper div.table div.row div.cellwidth10{width:10%;}
.tableswrapper div.table div.row div.cellwidth15{width:15%;}
.tableswrapper div.table div.row div.cellwidth20{width:20%;}
.tableswrapper div.table div.row div.cellwidth25{width:25%;}
.tableswrapper div.table div.row div.cellwidth30{width:30%;}
.tableswrapper div.table div.row div.cellwidth33{width:33.3333333333%;}
.tableswrapper div.table div.row div.cellwidth35{width:35%;}
.tableswrapper div.table div.row div.cellwidth40{width:40%;}
.tableswrapper div.table div.row div.cellwidth45{width:45%;}
.tableswrapper div.table div.row div.cellwidth50{width:50%;}
.tableswrapper div.table div.row div.cellwidth55{width:55%;}
.tableswrapper div.table div.row div.cellwidth60{width:60%;}
.tableswrapper div.table div.row div.cellwidth65{width:65%;}
.tableswrapper div.table div.row div.cellwidth66{width:66.6666666666%;}
.tableswrapper div.table div.row div.cellwidth70{width:70%;}
.tableswrapper div.table div.row div.cellwidth75{width:75%;}
.tableswrapper div.table div.row div.cellwidth80{width:80%;}
.tableswrapper div.table div.row div.cellwidth85{width:85%;}
.tableswrapper div.table div.row div.cellwidth90{width:90%;}
.tableswrapper div.table div.row div.cellwidth95{width:95%;}
.tableswrapper div.table div.row div.cellwidth100{width:100%;}

HTML

codice HTML:

<div class="tableswrapper">
<div class="table"><div class="row">

<div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

<div class="cellwidth50"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

<div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

</div></div>

<div class="table"><div class="row">

    <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

    <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

    <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

    <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

</div></div>

</div>

**ResianTaxidrive** · 05-07-2016, 18:27

E' il border-spacing che fa casino. Secondo me dovresti giocare proprio con i border della cella, magari mettili del colore che ti interessa.

**SDrago** · 06-07-2016, 08:23

Ciao, scusa il ritardo... Ora provo a fare come mi hai suggerito e vediamo che succede!
Grazie

**SDrago** · 07-07-2016, 08:16

Ho provato a fare qualche esperimento inserendo i bordi nelle celle ma in realtà questo ha portato altri problemi...
Ritorno allo script originale anche perchè necessita di minori configurazioni (se funzionasse

)

**ResianTaxidrive** · 07-07-2016, 14:05

che problemi? Io ho provato a fare così:

codice:

.tableswrapper div.table {display:table;margin-bottom:20px;border-collapse:separate;}
.tableswrapper div.table div.row div[class^='cellwidth'] div.cellcontents h1.celltitle {margin:0;padding:0;color:red;font-size:150%;}
...

.tableswrapper div.table div.row div.cellwidth25{width:25%; border-right:20px solid #00DDDD;}
.tableswrapper div.table div.row div.cellwidth25:last-child{width:20%; border-right:0;}
.tableswrapper div.table div.row div.cellwidth50{width:50%; border-right:20px solid #00DDDD;}

Certo non è che sia proprio il massimo fare miscugli di percentuali e px.
Ma perchè utilizzi questa struttura con display:table che non ho ben capito?

**SDrago** · 07-07-2016, 14:21

Ciao e grazie per il tuo tempo.
Vorrei utilizzare questa struttura perchè con il responsive è più semplice e perchè se utilizzo i float left poi devo mettere uno script jquery che mi normalizzi le altezze per ogni riga.
Inoltre lo script che ho postato è la versione semplificata in quanto ho previsto celle con solo contenuto, celle con sola immagine e celle con immagine e contenuto. Nel momento in cui utilizzo la soluzione con i bordi per normalizzare le larghezze mi sballano le altezze delle immagini. Metto il codice completo così da chiarire quanto detto (se vuoi testarlo devi mettere i riferimenti alle immagini).

codice HTML:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        * {font-family:"Trebuchet MS",Arial,Sans-Serif;outline:none;}
        html, body {margin:0;padding:0;background-color:rgba(221, 221, 221, 1);}

        /* LIMITAZIONE: Per evitare di fare comparire lo scorrimento orizzontale sono necessari margini dx/sx la cui somma è uguale/maggiore dei pixel aggiunti al width della tabella */
        .tableswrapper {margin-top:0;margin-right:15%;margin-bottom:0;margin-left:15%;padding:0;}

        .tableswrapper div.table {width:calc(100% + 40px);display:table;border-collapse:separate;border-spacing:20px 0;margin-bottom:20px;margin-left:-20px;padding:0;}
        .tableswrapper div.table:last-child {margin-bottom:0;}
        
        .tableswrapper div.table div.row {display:table-row;}

        .tableswrapper div.table div.row div[class^='cellwidth'] {display:table-cell;empty-cells:hide;padding:0;vertical-align:top;background-color:rgba(255, 255, 255, 1);}

        .tableswrapper div.table div.row div.cellwidth1            {width:1%;}
        .tableswrapper div.table div.row div.cellwidth2            {width:2%;}
        .tableswrapper div.table div.row div.cellwidth3            {width:3%;}
        .tableswrapper div.table div.row div.cellwidth4            {width:4%;}
        .tableswrapper div.table div.row div.cellwidth5            {width:5%;}
        .tableswrapper div.table div.row div.cellwidth6            {width:6%;}
        .tableswrapper div.table div.row div.cellwidth7            {width:7%;}
        .tableswrapper div.table div.row div.cellwidth8            {width:8%;}
        .tableswrapper div.table div.row div.cellwidth9            {width:9%;}
        .tableswrapper div.table div.row div.cellwidth10        {width:10%;}
        .tableswrapper div.table div.row div.cellwidth15        {width:15%;}
        .tableswrapper div.table div.row div.cellwidth20        {width:20%;}
        .tableswrapper div.table div.row div.cellwidth25        {width:25%;}
        .tableswrapper div.table div.row div.cellwidth30        {width:30%;}
        .tableswrapper div.table div.row div.cellwidth33        {width:33.3333333333%;}
        .tableswrapper div.table div.row div.cellwidth35        {width:35%;}
        .tableswrapper div.table div.row div.cellwidth40        {width:40%;}
        .tableswrapper div.table div.row div.cellwidth45        {width:45%;}
        .tableswrapper div.table div.row div.cellwidth50        {width:50%;}
        .tableswrapper div.table div.row div.cellwidth55        {width:55%;}
        .tableswrapper div.table div.row div.cellwidth60        {width:60%;}
        .tableswrapper div.table div.row div.cellwidth65        {width:65%;}
        .tableswrapper div.table div.row div.cellwidth66        {width:66.6666666666%;}
        .tableswrapper div.table div.row div.cellwidth70        {width:70%;}
        .tableswrapper div.table div.row div.cellwidth75        {width:75%;}
        .tableswrapper div.table div.row div.cellwidth80        {width:80%;}
        .tableswrapper div.table div.row div.cellwidth85        {width:85%;}
        .tableswrapper div.table div.row div.cellwidth90        {width:90%;}
        .tableswrapper div.table div.row div.cellwidth95        {width:95%;}
        .tableswrapper div.table div.row div.cellwidth100 {width:100%;}

        /* TRICK: abilitare se si desiderano larghezze di colonna uguali sulla riga*/
        /*.tableswrapper div.table div.row div[class^='cellwidth'] {width:2%;}*/
        
        /* LIMITAZIONE: Le colonne all'interno di ogni riga che hanno un'immagine di testata devono avere la stessa larghezza */
        .tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage {position:relative;overflow:hidden;margin:0;padding:0;padding-bottom:50%;}
        .tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage img {position:absolute;width:100%;top:0;bottom:0;left:0;right:0;margin:auto;}

        .tableswrapper div.table div.row div[class^='cellwidth'] div.cellcontents {display:block;padding:20px;}
        .tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage + div.cellcontents {padding-top:20px;}
        .tableswrapper div.table div.row div[class^='cellwidth'] div.cellcontents h1.celltitle {margin:0;padding:0;color:red;font-size:150%;}

        @media screen and (max-width:817px) {
            .tableswrapper {margin-right:1%;margin-left:1%;padding:0;}
            .tableswrapper div.table {width:96%;display:block;margin-left:0;border-collapse:collapse;}
            .tableswrapper div.table:first-child {border-spacing:0 0;}
            .tableswrapper div.table:last-child {border-spacing:0 0;}
            .tableswrapper div.table div.row {display:block;}
            .tableswrapper div.table div.row div[class^='cellwidth'] {width:100%;display:block;margin-top:0;margin-bottom:20px;padding:2%;background-color:rgba(255, 255, 255, 1);}
            .tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage {position:relative;overflow:hidden;margin:0;padding-bottom:50%;}
        }

    </style>
</head>
<body>

    <div class="tableswrapper">

        <div class="table"><div class="row">
            <div class="cellwidth30"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth70"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
        </div></div>

        <div class="table"><div class="row">
            <div class="cellwidth30"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth40"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth30"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
        </div></div>

        <div class="table"><div class="row">
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth50"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
        </div></div>

        <div class="table"><div class="row">
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth50"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
        </div></div>

        <div class="table"><div class="row">
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
        </div></div>

        <div class="table"><div class="row">
            <div class="cellwidth33"><div class="headerimage"><img src="headerimg5.jpg" /></div></div>
            <div class="cellwidth33"><div class="headerimage"><img src="headerimg6.jpg" /></div></div>
            <div class="cellwidth33"><div class="headerimage"><img src="headerimg7.jpg" /></div></div>
        </div></div>

        <div class="table"><div class="row">
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth50"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth25"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
        </div></div>

        <div class="table"><div class="row">
            <div class="cellwidth25"><div class="headerimage"><img src="headerimg1.jpg" /></div><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth25"><div class="headerimage"><img src="headerimg2.jpg" /></div><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth25"><div class="headerimage"><img src="headerimg3.jpg" /></div><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth25"><div class="headerimage"><img src="headerimg4.jpg" /></div><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
        </div></div>

        <div class="table"><div class="row">
            <div class="cellwidth20"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth20"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth20"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth20"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
            <div class="cellwidth20"><div class="cellcontents"><h1 class="celltitle">Titolo cella</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
        </div></div>

    </div>

</body>
</html>

Discussione: Div con display:table

Strumenti discussione

Ricerca discussione

Visualizza

Div con display:table

Permessi di invio