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>