responsive css table with multiple scalable images in multiple rows

Question

My goal is to turn a sliced image into a interactive image. I went with css tables because I have 4 rows of images, each row with different number of images(slices) and each image will be a different width, same height within rows.

The basic construction works in Safari but not in Firefox. I understand that css tables do not work with "block elements' and I have spent countless hours before trying with standard divs.

I'd like the whole page to scale, however I can't seem to find the right way to handle this. i have a version that works fine as a fixed size, but I just can't seem to make it liquid.

Any thoughts would be welcome and appreciated.

Here's my css.

.container {
max-width: 871px;
width:100%; 
}

.tb {
display: table;
width: 100%;
margin: 0 auto;
background-color: #FFF;
}

.tbr {
display: table-row;
width:100%;
}

.tbc {
display: table-cell;
vertical-align: top;
}

.tb img {
float:left;
}

.content {
padding: 0px 0;
}

.row1 {
width:100%;
max-height:227px;
float:left;
}

.row2 {
width:100%;
float:left;
max-height:145px;
}

.row3 {
    width:100%;
float:left;
max-height:118px;
}

.row4 {
width:100%;
float:left;
max-height:145px;
}

...and html

<div class=" container">
<div class="tb">
<div class="tbr">
<div class="tbc row1"><img src="images/house_01.png"></div></div>

<div class="tbr row2" >
<div class="tbc"><img src="images/house_02.jpg"></div>
<div class="tbc"><img src="images/house_03.jpg"></div>

<div class="tbc"><img src="images/heat_01.png"/></div>
<div class="tbc"><img src="images/house_05.jpg"/></div></div>

<div class="tbr row3" >
<div class="tbc"><img src="images/house_06.jpg"></div>
<div class="tbc"><img src="images/house_07.jpg"></div>
<div class="tbc"><img src="images/house_08.jpg"/></div>
<div class="tbc"><img src="images/house_09.jpg"/></div>
<div class="tbc"><img src="images/house_10.jpg"/></div>
<div class="tbc"><img src="images/heat_02.png" /></div>
<div class="tbc"><img src="images/house_11.jpg"/></div>
<div class="tbc"><img src="images/house_12.jpg"/></div>
<div class="tbc"><img src="images/house_13.jpg"/></div></div>

<div class="tbr row4">
<div class="tbc"><img src="images/house_14.jpg"></div>
<div class="tbc"><img src="images/house_15.jpg"></div>
<div class="tbc"><img src="images/house_16.jpg"/></div>
<div class="tbc"><img src="images/house_17.jpg"/></div>
<div class="tbc"><img src="images/house_18.jpg"></div>
</div>

<div class="tbr">
<div class="tbc"><img src="images/house_19.jpg" style="float:left"></div></div></div>  

Answer 1

What are you using the float property for? I also don't understand why you are defining a height. If you want scaling images if the table gets smaller give them a width of 100%.