The issue was resolved by adding padding: 0
and height: 100px
to the table cell (which is the parent of the nested table) in Chrome. Interestingly, any setting of the height
property in pixels worked, even when using a smaller value. It seems that the 100% height percentage requires a reference point.
body {
margin: 0;
}
<table style="font: 8pt Verdana; width:100%;">
<tr style="background-color:#ffcc00;color:black;">
<th style="width:170px">
<table style="padding: 0px; margin: 0px; font: 8pt verdana; vertical-align: 100%;
height: 100%; width:100%;">
<tr>
<td style="width:40%; margin:0px; text-align: left;">
<strong>Mile<br />Marker</strong></td>
<td style="width:1%;margin: 0px auto;"> <br /></td>
<td style="width:59%;margin: 0px auto; text-align: center;">
<strong>The Safety<br />Rating</strong></td>
</tr>
</table>
</th>
<th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;">
<strong>Directions</strong>
</th>
<th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;">
<strong>Comments</strong>
</th>
<th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;">
<strong>Number of Vehicles</strong>
</th>
<th style="padding: 9px; color: #000000; vertical-align: middle;
font-family: Verdana; font-size: 8pt;width:70px;">
<strong> Map & </strong><br />
<strong> Weather </strong><br />
</th>
<th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;">
<strong>Source</strong>
</th>
</tr>
<tr id="firstRow" style="background-color:#ffff99; font: 8pt verdana;height:100%">
<!-- Multiple table rows will be added here - This code is simplified for identifying the origin of the problem -->
<td style='height: 100px; padding:0; text-align:center;' rowspan='1'>
<!-- Code continues here -->
<!-- In Edge and Chrome, the nested table didn't occupy the full height of the <td> cell top to bottom, unlike Firefox -->
<table id="This is where my problem resides" style='padding: 0px; margin: 0px; height: 100%;
border:thin solid #800080; background-color:#ffff99;'>
<tr style=' font: 8pt verdana; height:100%;'>
<!-- The black band on the next line doesn't extend from top to bottom in Edge/Chrome, but it does in Firefox -->
<td style='height:100%; text-align:left;vertical-align:middle;' rowspan='1'>15.5<br />The Road</td>
<td style='margin: 0px; border-width: 0px; padding: 0px; width:1%; height:100%; background-color:black; border-top-color: 0; border-right-color: 0; border-bottom-color: 0; border-left-color: 0;' rowspan='1'> </td>
<td style='width:121px;height:100%;' rowspan='1'> Poor Great<br/>
<input type='radio' name='rblSafety249' class='radio_b' value='1' runat='server' disabled="disabled" />
<input type='radio' name='rblSafety249' class='radio_b' value='2' runat='server' disabled="disabled" />
<input type='radio' name='rblSafety249' class='radio_b' value='3' runat='server' disabled="disabled" />
<input type='radio' name='rblSafety249' class='radio_b' value='4' runat='server' disabled="disabled" />
<input type='radio' name='rblSafety249' class='radio_b' value='5' runat='server' disabled="disabled" />
<br /> <br />
<div style='text-align: center;'>
<input onclick=window.open( 'RateSafety.aspx') type='button' style='width: 80px; padding:0' id='btnRateSafety' name='btnRateSafety' value='Rate Safety' visible='true' />
<br/>
<div style='width:110px'>
</div>
</div>
</td>
</tr>
</table>
</td>
<td>
The directions go here.
</td>
<td>
Comments go here
</td>
<td>
the number goes here
</td>
<td><br />
<input type="submit" name="MyRepeater:_ctl1:btnShowMap" value="Map" id="MyRepeater__ctl1_btnShowMap" style="width:35px; " />
<a href='#footnote'><sup>
<span id="MyRepeater__ctl1_lFootnoteMap" style="font-weight:bold;">1</span></sup>
</a><br style="display:block;margin: 2px 0;" /><br style="display:block;margin: 1px 0;" />
<a href='#footnote'><sup>
</sup>
</a><br style="display:block;margin: 2px 0;" /><br style="display:block;margin: 1px 0;" />
<input type="submit" name="MyRepeater:_ctl3:btnShowWeather" value="Weather" id="MyRepeater__ctl3_btnShowWeather" style="width:60px;" />
<a href='#footnote'><sup>
<span id="MyRepeater__ctl3_lFootnoteWeather" style="font-weight:bold;">1</span></sup>
</a><br /><br />
</td>
<td>
http://www.aWebAddress.com
</td>
</tr>
</table>