Making a table cell constant width & height

Background: I'm using a photo shopping-cart that automatically generates a tables-based gallery from php, thus limiting me from too much flexibility. I'm also a novice.

Problem: The gallery puts out table cells that adapt in height to the content. When I have a full row of horizontal thumbnails the table cells are short and wide and when a row contains a vertical thumbnail, the cells are much taller. I want the cells to all be square, with the thumbnail sitting right in the middle.

I have access to input CSS in the style sheet, as well as a small section of HTML input but this HTML is inserted inside the individual thumbnail table cells; I have no access to edit the main table HTML. I have discovered class and ID names for many components using firebug.

What I've tried: I've tried to insert DIVs of a fixed size but the table still eats up any vertical space not occupied by the actual image. I've tried inserting a transparent PNG file, 180px x 180px into a div (which works to force the right size cells) and then put the thumbnail image (which is 150px x 150px) into another div and mess with z-indexing, relative/absolute positioning, etc. but I never got the two divs to stack on top of each other. Absolute positioning always aligned all 50 thumbnails to the top left corner of the page, not the table cell. Right now, the thumbnail div always comes up directly below the PNG div causing the table cell to be way too tall.

I'm stuck because I've tried everything within my skill-set and exhausted my googling. I think what I need is a way to either force the table cells to stay a certain height or find a way to make the thumbnail image overlay on top of the PNG.

Here is开发者_运维百科 my current code, which is putting a 180x180 PNG (to force the table to the correct dimensions) in one div, and the thumbnail image in a second div, below the first div. Please excuse my sloppiness as I'm in no way a professional, just a tinkerer!

HTML inserted into individual table cells

<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>

And I have access to these additional classes & ids:

<table class="thumbnails_table">
<td class="thumbnails_cells">

---

I think you can do this with pure CSS, without having to add and HTML (besides the image tag, of course) into the TDs:

td.thumbnails_cells {
    width: 180px;
    height: 180px;
    text-align: center;
}

This is all it takes for me, 'cause my test image was already centred vertically (I think on account of its being inside a TD - default CSS and whatnot).

Hope this helps!

---

OK, I got this figured out...so simple, but hey when you've never done it before...

Based on good advice in another thread:

<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>