Вложенная таблица не во всю высоту в ячейке <td>

Question

Я вкладываю table в td. В Firefox вложенная таблица заполняет всю ячейку td сверху вниз, но в Edge и Chrome вложенная таблица центрируется внутри ячейки td, не заполняя ячейку. В конечном итоге у меня будет эта таблица, охватывающая несколько строк, и я хотел бы, чтобы созданная черная полоса занимала несколько строк.

Я бы хотел, чтобы это выглядело так черная полоса идет сверху вниз

Вот как это отображается в 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;">&nbsp;<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>&nbsp;Map&nbsp;&nbsp;&nbsp;&&nbsp;&nbsp;</strong><br />
      <strong>&nbsp;Weather&nbsp;&nbsp;</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'>&nbsp;</td>
          <td style='width:121px;height:100%;' rowspan='1'> Poor&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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'>&nbsp;
              </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 />&nbsp;
      <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;" />&nbsp;

      <a href='#footnote'><sup>
                        </sup>
                    </a><br style="display:block;margin: 2px 0;" /><br style="display:block;margin: 1px 0;" />&nbsp;

      <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>

Answer 1

Я добавил 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;">&nbsp;<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>&nbsp;Map&nbsp;&nbsp;&nbsp;&&nbsp;&nbsp;</strong><br />
      <strong>&nbsp;Weather&nbsp;&nbsp;</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'>&nbsp;</td>
          <td style='width:121px;height:100%;' rowspan='1'> Poor&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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'>&nbsp;
              </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 />&nbsp;
      <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;" />&nbsp;

      <a href='#footnote'><sup>
                        </sup>
                    </a><br style="display:block;margin: 2px 0;" /><br style="display:block;margin: 1px 0;" />&nbsp;

      <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>

Answer 2

Думаю, вы ищете:

table {
  border-spacing: 0;
}