Resize an image using css when its nested in table - html

Question

Im trying to create a dynamic site that will display a specified profile image throughout the page in various areas.
As such, I'd like to have only one file, and resize it to fit in each area, much like Facebook does with its usergroups and profile pics.
I had no problem doing this until i tried to put the image inside a table:
HTML
<table width='600px'>
<tr>
<td rowspan="3" width="75px" height="75px">
<div id="cp_image" class="hidden rborder">
<img class="cp_img_resize" src="<?php echo $profile[0]['cp_img_loc'] ?>"/>
</div>
</td>
<td>
<strong><?php echo $profile[0]['name'] ?></strong>
</td>
</tr>
<tr>
<td>
<em><?php echo $profile[0]['description']?></em>
</td>
</tr>
<tr>
<td><?php echo $popular ?></td>
</tr>
</table>
My CSS
#cp_image {
width: 100px;
height: 100px;
}
#cp_name {
height: 35px;
min-width: 200px;
}
.cp_img_resize {
width:100px;
height: auto;
}
Is there something I'm missing? Any reason the image is not resizing?
Thanks

Answer 1

You are setting the width of the image TD inline to a smaller px:
<td rowspan="3" width="75px" height="75px">
The width of the TD is overriding the width you are declaring for the IMG.

Answer 2

See http://jsfiddle.net/DmnV7/2/
CSS:
.table{
width:600px;
}
.cp_img{
height:75px;
width:75px;
}
.cp_img>img {
max-height:75px;
max-width:75px;
display:block;
margin:0 auto;
}
HTML:
<table class="table">
<tr>
<td rowspan="3" class="cp_img">
<img src="[image]" />
</td>
<td>
<strong>Name</strong>
</td>
</tr>
<tr>
<td>
<em>Description</em>
</td>
</tr>
<tr>
<td>Popular</td>
</tr>
</table>