CODEWITHSUNDEEP
htmlcss
Rama Rao M
Rama Rao M

Reputation: 3051

Table height 100% is not set to parent height

I have a table within a table cell. The child table height must be aligned to parent cell height. I set height="100%" to the child table, but it's not working.

CSS

.outer{
  border:1px solid black;
  border-collapse:collapse;
}
.inner{
  border:1px solid red;
  height:100%;
  width:auto;
}

HTML

<table class="outer">
  <tr>
    <td>
      <!-- Content Here -->
    </td>
    <td>
      <table class="inner">
        <tr>
          <td>
            <!-- Content Here -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 2

Views: 6915

Answers (3)

Lisa van Ginneken
Lisa van Ginneken

Reputation: 29

My solution was to give the inner table a fixed height of 1px and set the height of the td in the inner table to 100%. Against all odds, it works fine, tested in IE, Chrome and FF!

Upvotes: 2

nico
nico

Reputation: 835

Browser doesn't calculate height for table cells. At least there is no good cross-browser CSS solution for that. Relative and absolute positioning of parent TD will cause the table collapsing. The solution might be to set the height fixed in pixels or calculate offsetHeight using JavaScript. Set style="height:100%;" to parent TD and id="inner" to child table. Run the following JavaScript on page load:

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
 <style>
  .outer{
   border:1px solid black;
   border-collapse:collapse;
  }
  .inner{
    border:1px solid red;
    height:100%;
    width:auto;
  }
 </style>

 </head>
 <body>

  <table class="outer">
   <tr>
    <td> asdf alsdf asldf<br/>asdf alsdf asldf<br/> asdf alsdf asldf<br/>
         asdf alsdf asldf<br/>asdf alsdf asldf<br/>
    </td>
    <td style="height:100%;">
     <table class="inner" id="inner">
       <tr><td>inner content</td></tr>
     </table>
    </td>
   </tr>
  </table>
  <script type="text/javascript">
    var el = document.getElementById('inner');
    el.style.height = el.parentNode.offsetHeight + 'px';
  </script>
 </body>
</html>

You can also bind this to window onresize event if needed.

Upvotes: 2

Aratidgr8
Aratidgr8

Reputation: 431

Assign some width to the parent td with inner table. say width="100". Also add following CSS:

for outer class add position : relative;

for inner class add position:absolute; bottom:0; right:0; top:0;

also add display: block property to inner class

Upvotes: 0

Related Questions