CODEWITHSUNDEEP
htmlcss
twisted
twisted

Reputation: 802

How to make a nested table the same height as its parent

I have an html table nested inside an outer one.

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

What I'd like is for the inner table height to expand to match the height of the row of the outer table. I've tried setting the inner table with a style that has height:100%, as I've seen suggested elsewhere, but it doesn't work:

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

Could anyone tell me the technique?

Upvotes: 5

Views: 4870

Answers (3)

mihkov
mihkov

Reputation: 1189

You should set height to parent element. 

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

Upvotes: 3

ryachza
ryachza

Reputation: 4540

As per this question: Table Height 100% inside Div element

It seems the container needs an explicit height. Adding a height to the containing td appears to work as desired, though I'm not sure that is a reasonable requirement for your situation.

Upvotes: 0

jelleB
jelleB

Reputation: 183

Give the nested table a css class en set it's height and max height and min height on 100 % Tables are not outdated as long as you use them to show data as in a grid not for layouting stuff. Hope this helps

Edit =》 try display :inline -Block if all else fails

Upvotes: 0

Related Questions