如何使嵌套表格与其父表格高度相同

Question

我有一个嵌套在外部表格内的 html 表。

<table border="1">
  <tr>
    <td>
      <canvas id="myCanvas" width="100" height="100" style="border:1px solid #FF0000;"/>
    </td>
    <td>
      <table border="1" >
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

我想要的是内部表格高度扩展以匹配外部表格行的高度。我尝试使用 height:100% 的样式设置内表，正如我在其他地方看到的建议，但它不起作用：

https://jsfiddle.net/twistedlizard/ghnyton9/

谁能告诉我技术吗？

Answer 1

您应该设置height为父元素。

<table border="1">
   <tr>
     <td>
        <canvas id="myCanvas" width="100" height="100" style="border:1px solid #FF0000;"/>
     </td>
     <td style="padding: 0; height:100%">
        <table border="1" style="height:100%;">
           <tr>
             <td>A</td>
             <td>B</td>
             <td>C</td>
           </tr>
        </table>
    </td>
  </tr>
</table>