Table Row Heights

[IfNot]

Hi,
I've got a problem that is freaking me out. (it's really wierd 'cause
IE & FF are both behaving the way I expected but Chrome wont.

I have a problem trying to get equal row heights in a table where
the last 2 columns are rowspans (4). I've got both IE & FF showing nice even row heights but for some reason I cant get it to happen with Chrome . Any Ideas?

<table class= tbl_Size_Chart>
<tr class = "row_height">
<th colspan="8">Size Chart - Children</th></tr>
 

  <tr class = "row_height"><!-- Row 1 -->
     <th class = "row_height">Size</th><!-- Col 1 -->
     <th class = "row_height">2</th><!-- Col 2 -->
     <th class = "row_height">4</th><!-- Col 3 -->
     <th class = "row_height">6</th><!-- Col 4 -->
     <th class = "row_height">8</th><!-- Col 5 -->
     <th class = "row_height">10</th><!-- Col 6 -->
     <th class = "row_height">12</th><!-- Col 7 -->
     <th class = "row_height">14</th><!-- Col 8 -->
  </tr>
  <tr class = "row_height"><!-- Row 2 -->
     <th class = "row_height">Chest</th><!-- Col 1 -->
     <td class = "row_height">58</td><!-- Col 2 -->
     <td class = "row_height">61</td><!-- Col 3 -->
     <td class = "row_height">64</td><!-- Col 4 -->
     <td class = "row_height">69</td><!-- Col 5 -->
     <td class = "row_height">73</td><!-- Col 6 -->
     <td class = "row_height">76</td><!-- Col 7 -->
     <td class = "row_height">81</td><!-- Col 8 -->
  </tr>
  <tr class = "row_height"><!-- Row 3 -->
     <th class = "row_height">Waist</th><!-- Col 1 -->
     <td class = "row_height">53</td><!-- Col 2 -->
     <td class = "row_height">55</td><!-- Col 3 -->
     <td class = "row_height">58</td><!-- Col 4 -->
     <td class = "row_height">60</td><!-- Col 5 -->
     <td class = "row_height">64</td><!-- Col 6 -->
     <td class = "row_height">68</td><!-- Col 7 -->
     <td class = "row_height">72</td><!-- Col 8 -->
  </tr>
  <tr class = "row_height"><!-- Row 3 -->
     <th class = "row_height">Hip</th><!-- Col 1 -->
     <td class = "row_height">51</td><!-- Col 2 -->
     <td class = "row_height">64</td><!-- Col 3 -->
     <td class = "row_height">66</td><!-- Col 4 -->
     <td class = "row_height">71</td><!-- Col 5 -->
     <td class = "row_height">76</td><!-- Col 6 -->
     <td class = "row_height">81</td><!-- Col 7 -->
     <td class = "row_height">87</td><!-- Col 8 -->
  </tr>
</table>
<table class= tbl_Size_Chart>
  <tr class = "row_height">
  <th colspan="5">Size Chart - Ladies</th>
  <th colspan="3">Measuring Guide</th>  

  <tr class = "row_height"><!-- Row 1 -->
     <th class = "row_height">Size</th><!-- Col 1 -->
     <th class = "row_height">8</th><!-- Col 2 -->
     <th class = "row_height">10</th><!-- Col 3 -->
     <th class = "row_height">12</th><!-- Col 4 -->
     <th class = "row_height">14</th><!-- Col 5 -->
	 <td class = "row_height" rowspan="4"  colspan="2" width="10%"><img src="images/Measuring.jpg" width="129" height="222" alt="" title="" border="0" align="left"> </td>
	 <td class = "row_height" rowspan="4"  colspan="1" width="10%">Please ensure that your measurements are taken at the fullest extent of the bust and hips and at the natural waist of the dancer.</td>
  </tr>
  <tr class = "row_height"><!-- Row 2 -->
     <th class = "row_height">Bust</th><!-- Col 1 -->
     <td class = "row_height">80</td><!-- Col 2 -->
     <td class = "row_height">83</td><!-- Col 3 -->
     <td class = "row_height">87</td><!-- Col 4 -->
     <td class = "row_height">92</td><!-- Col 5 -->
  </tr>
  <tr class = "row_height"><!-- Row 3 -->
     <th class = "row_height">Waist</th><!-- Col 1 -->
     <td class = "row_height">61</td><!-- Col 2 -->
     <td class = "row_height">64</td><!-- Col 3 -->
     <td class = "row_height">67</td><!-- Col 4 -->
     <td class = "row_height">71</td><!-- Col 5 -->
  </tr>
  <tr class = "row_height"><!-- Row 4 -->
     <th class = "row_height">Hips</th><!-- Col 1 -->
     <td class = "row_height">85</td><!-- Col 2 -->
     <td class = "row_height">88</td><!-- Col 3 -->
     <td class = "row_height">92</td><!-- Col 4 -->
     <td class = "row_height">97</td><!-- Col 5 -->
  </tr>
</table>

.tbl_Size_Chart{
	height: 35%;
	background-image: none;
	width: 800px;
	max-width: 800px;
	color: #464646;
	font-family: Verdana;
	font-weight: bold;
	line-height: 100%;
	font-size: 10pt;
	border: 2px #497ABF solid;
	padding: 2px 2px;
	border-collapse: collapse;
	margin-right: auto;
	margin-left: auto;
	background-image: none
	
}
.row_height{

	height: 20%;
}

I know the code looks crazy at the moment but I've been sticking the class into everything I can think of to try to get this thing working.

[almostbob]

I dont like tables much, but for tabular data like this they Work :)
try

<table rules='rows' class='tbl_Size_Chart' >
<caption>Size Chart - Children</caption>
<tr class = "row_height"><!-- Row 1 -->
<th >Size</th><!-- Col 1 -->
<th > 2 </th><!-- Col 2 -->
<th > 4 </th><!-- Col 3 --><!-- will give the same resulat as below, css inherits too lazy to edit much out of cut n paste-->
<th class = "row_height"> 6 </th><!-- Col 4 -->
<th class = "row_height"> 8 </th><!-- Col 5 -->
<th class = "row_height"> 10</th><!-- Col 6 -->
<th class = "row_height"> 12</th><!-- Col 7 -->
<th class = "row_height"> 14</th><!-- Col 8 -->
</tr>
<tr class = "row_height"><!-- Row 2 -->
<th class = "row_height">Chest</th><!-- Col 1 -->
<td class = "row_height">58</td><!-- Col 2 -->
<td class = "row_height">61</td><!-- Col 3 -->
<td class = "row_height">64</td><!-- Col 4 -->
<td class = "row_height">69</td><!-- Col 5 -->
<td class = "row_height">73</td><!-- Col 6 -->
<td class = "row_height">76</td><!-- Col 7 -->
<td class = "row_height">81</td><!-- Col 8 -->
</tr>
<tr class = "row_height"><!-- Row 3 -->
<th class = "row_height">Waist</th><!-- Col 1 -->
<td class = "row_height">53</td><!-- Col 2 -->
<td class = "row_height">55</td><!-- Col 3 -->
<td class = "row_height">58</td><!-- Col 4 -->
<td class = "row_height">60</td><!-- Col 5 -->
<td class = "row_height">64</td><!-- Col 6 -->
<td class = "row_height">68</td><!-- Col 7 -->
<td class = "row_height">72</td><!-- Col 8 -->
</tr>
<tr class = "row_height"><!-- Row 3 -->
<th class = "row_height">Hip</th><!-- Col 1 -->
<td class = "row_height">51</td><!-- Col 2 -->
<td class = "row_height">64</td><!-- Col 3 -->
<td class = "row_height">66</td><!-- Col 4 -->
<td class = "row_height">71</td><!-- Col 5 -->
<td class = "row_height">76</td><!-- Col 6 -->
<td class = "row_height">81</td><!-- Col 7 -->
<td class = "row_height">87</td><!-- Col 8 -->
</tr>
</table>
<p><table class= 'tbl_Size_Chart' rules='rows' style='width:62.5%; float:left;' >
<caption>Size Chart - Ladies</caption>
<tr class = "row_height"><!-- Row 1 -->
<th class = "row_height">Size</th><!-- Col 1 -->
<th class = "row_height">8</th><!-- Col 2 -->
<th class = "row_height">10</th><!-- Col 3 -->
<th class = "row_height">12</th><!-- Col 4 -->
<th class = "row_height">14</th><!-- Col 5 -->
</tr>
<tr class = "row_height"><!-- Row 2 -->
<th class = "row_height">Bust</th><!-- Col 1 -->
<td class = "row_height">80</td><!-- Col 2 -->
<td class = "row_height">83</td><!-- Col 3 -->
<td class = "row_height">87</td><!-- Col 4 -->
<td class = "row_height">92</td><!-- Col 5 -->
</tr>
<tr class = "row_height"><!-- Row 3 -->
<th class = "row_height">Waist</th><!-- Col 1 -->
<td class = "row_height">61</td><!-- Col 2 -->
<td class = "row_height">64</td><!-- Col 3 -->
<td class = "row_height">67</td><!-- Col 4 -->
<td class = "row_height">71</td><!-- Col 5 -->
</tr>
<tr class = "row_height"><!-- Row 4 -->
<th class = "row_height">Hips</th><!-- Col 1 -->
<td class = "row_height">85</td><!-- Col 2 -->
<td class = "row_height">88</td><!-- Col 3 -->
<td class = "row_height">92</td><!-- Col 4 -->
<td class = "row_height">97</td><!-- Col 5 -->
</tr>
</table>
<div class= 'tbl_Size_Chart' style='width:35%; float:right;' >
<span style='text-align:center;width:100%;'>Measuring Guide</span><br>
<img src="images/Measuring.jpg" width="129" height="222" alt="" title="" border="0" align="left" style='float:left;'>
Please ensure that your measurements are taken at the fullest extent of the bust and hips and at the natural waist of the dancer
</p>

The ladies sizing chart is broken into two floated left and right within a <p>container they will remain aligined until the window is too small to contain the sizing image, then the right div will drop below the left table.
yes the classes given to the <td> and <th> are redundant, they will (fingers crossed) inherit the css of the parent <tr>
dont set a font size in points or pixels it will be illegible to a large part of the target audience
relative sizes for onscreen work
ems and %, if you want it smaller set font-size:85%;
if you want it bigger set font-size:135%; (example)
then the site will adjust to my, your & blind freddy's browser settings, blind freddy has a basefont of 160px 10px for him is a grey fuzz
There is No way to make the image rescale to the exact size of the containing element (in this case <td> without distorting it on page resize, for a body silhoutte as a measuring guide, that would be bad.
the image at a size that works, and allow text to flow around it

( I just like tables with rows ruled, no logical reason )

[IfNot]

Thanks, Ill give it a try