Change the height of a td element - html

Question

I'm working on some code written by someone else and I have a 3 block element that I need to change.
I'm trying to change the first block height to only goes as big as the image is.
I can't find any way of controlling the height of the blocks and can't figured out what is setting up the height.
If you have any suggestions please help.
Thanks!
<!--[if mso]><table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse: collapse; width: 100%"><tr><td style="width: 100%;"><![endif]-->
<div style="float: left; width: 100%" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size:0px" class="nomob"> </td>
<td width="640" align="center" style="width:640px;min-width:640px;" class="wrapto320px">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%; " class="wrapto320px">
<tbody>
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th bgcolor="red" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1976">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976mob" width="1" style="display:block;" class="wrapto100pc" alt="1976">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1996">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996mob" width="1" style="display:block;" class="wrapto100pc" alt="1996">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" class="mobheightclear">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:20px 20px 0px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
We launch our Against Animal Testing campaign.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1998">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998mob" width="1" style="display:block;" class="wrapto100pc" alt="1998">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" class="mobheightclear">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:20px 20px 0px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
We celebrate 50 years of human rights with Amnesty International.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size:0px" class="nomob"> </td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->

Answer 1

You can't change the height of the first block(the red one) as it is a cell in the row of a table. You'll probably have to use <div> element to manipulate the height factor.
Refer to this post for more details Change Height of a <td> without affecting the whole row height
Also, If your primary concern is the whitespace below the image in the first block, you can either 1) add some content below or 2) remove the "vertical-align: top;" inline-css property of the red block's <th> tag, which will align your image at the center of the cell.
Hope this helps!