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>

我喜欢的是内表高度扩展以匹配外表行的高度。我尝试将内部表格设置为高度为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>

Answer 2

为嵌套表提供一个css类，设置它的高度和最大高度以及最小高度为100％表格不会过时，只要您使用它们在网格中显示数据而不是用于布局内容。希望这有帮助

编辑=“尝试显示：内联 - 如果所有其他方法都失败则阻止

Answer 3

根据这个问题：Table Height 100% inside Div element

容器似乎需要明确的高度。为包含td添加高度似乎可以正常工作，但我不确定这是否适合您的情况。

如何使嵌套表与其父表具有相同的高度

3 个答案: