Für responsive Design sind Tabellen höchst ungeeignet. Zum Layouten sollte man diese schon garnicht verwenden, da Tabellen sich nicht an die Displaygröße anpassen.
Man möchte allerdings manchmal auf der Ansicht für Desktop PC bzw. Displays grösser 500px mehrere Spalten nebeneinander mit unterschiedlichen Inhalten darstellen.
Wird die Mindestbreite von 500px unterschritten ordnen sich die Container untereinander an.
Die notwendigen Dateien stellen wir wieder hier zum Download bereit.

Das umschliessende <div class="section group"></div> muss um jede Zeile erstellt werden!

Ein 3 Spaltiges Layout

Ein 2 Spaltiges Layout

/*responsiv Grid 3 Spalten*/
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
/*  Spalten Setup  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/*  Gruppierung  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* Für IE 6/7 */
}
/*  Grid für 3 Spalten  */
.span_3_of_3 {
	width: 100%; /* für eine Spalte*/
}
.span_2_of_3 {
	width: 66.1%; /*breitere Spalte bei 2 Spalten */
}
.span_1_of_3 {
	width: 32.2%; /*für 3 und 2 Spalten mit breiterer Spalte */
}
/*  Ausgabe bei Display < 500px */

@media only screen and (max-width: 500px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}
@media only screen and (max-width: 500px) {
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
}
/*responsiv Grid 2 Spalten*/
.span_1_of_2 {
	width: 100%; /* für eine Spalte */
}
.span_2_of_2 {
	width: 49%; /* für 2 gleich breite Spalten */
}

/*  Ausgabe bei Display < 500px */
@media only screen and (max-width: 500px) {
	.span_1_of_2 {
		width: 100%; 
	}
	.span_2_of_2 {
		width: 100%; 
	}
}

oder gleich als minimiertes CSS in die style_private_IHR-LAYOUT.css übertragen

.section{clear:both;padding:0;margin:0}.col{display:block;float:left;margin:1% 0 1% 1.6%}.col:first-child{margin-left:0}.group:after,.group:before{content:"";display:table}.group:after{clear:both}.group{zoom:1}.span_3_of_3{width:100%}.span_2_of_3{width:66.1%}.span_1_of_3{width:32.2%}@media only screen and (max-width:500px){.col{margin:1% 0}}@media only screen and (max-width:500px){.span_1_of_3,.span_2_of_3,.span_3_of_3{width:100%}}.span_1_of_2{width:100%}.span_2_of_2{width:49%}@media only screen and (max-width:500px){.span_1_of_2,.span_2_of_2{width:100%}}