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>