我正在td中嵌套一个table。在Firefox中，嵌套表从上到下填充整个td单元格，但在Edge和Chrome中，嵌套表格位于td单元格的中心，而不是填充单元格。我最终会让这个表跨越多行，并希望创建的黑条跨越多行。
这是我想要的样子(Firefox(注意，黑带从上到下
这就是它在Edge和Chrome中的显示方式请注意，嵌套表不会填充整个单元格
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%">
<!-- There will be multiple table rows added here - I just simplified the code to find out where
my probem originated from -->
<td style='height: 100%; text-align:center;' rowspan='1'>
<!--ok to here-->
<!--In Edge and Chrome the nested table doesn't fill the entire <td> cell top to bottom -
Firefox works the way I would like it to -->
<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%;'>
<!--next line black band doesn't go from top to bottom in edge/chrome - ok 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>我将padding: 0和height: 100px添加到该表单元格(嵌套表的父单元格(中，从而解决了问题(在Chrome中(。实际上，以像素为单位的任何height设置都有效，即使是较小的设置也是如此。显然，100%的height百分比需要参考。
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%">
<!-- There will be multiple table rows added here - I just simplified the code to find out where
my probem originated from -->
<td style='height: 100px; padding:0; text-align:center;' rowspan='1'>
<!--ok to here-->
<!--In Edge and Chrome the nested table doesn't fill the entire <td> cell top to bottom -
Firefox works the way I would like it to -->
<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%;'>
<!--next line black band doesn't go from top to bottom in edge/chrome - ok 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>我想你要找的是：
table {
border-spacing: 0;
}