title: In CSS, how can I make a table expand to fill a container div?
body: <p>I want to "carve out" spaces on the screen by creating several container DIVs, then fill in the content in each of the DIVs. in one case, I need to fill up with a table.</p>
  
  <p>the innermost part of the table are jpeg <code>&lt;img&gt;</code>. I do not want to use fixed pixel sizes anywhere, so that the content will shrink nicely in different size browsers.</p>
  
  <p>After repeated trial and errors, and some reading on the internet, I figured out that to let the whole chain container-div--->table-->tbody-->tr-->td-->img fit nicely in size, I must make sure that each of these elements have the following attributes <code>"height:100%; width:100; position:relative"</code> (the img position itself can be absolute ).</p>
  
  <p>This works fine with a table of 1 row only. but if I have multiple rows, it looks that the row height is calculated naiively from its parent, which is tbody, because if I have 2 rows, each row is still as high as the tbody. but even after I manually divide the height of TR by 2, it does not exactly fit into the container. </p>
  
  <p>So how can I make the table shrink automatically to the surrounding container?</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
  
  div {
  border : 2px solid red;
  }
  
  #bottom-banner {
  height:40%;
  }
  
  #bottom-banner tbody {
  position:relative;
  height:100%;
  width:100%;
  }
  
  #bottom-banner tr {
  max-height:100%;
  width:100%;
  position:relative;
  height:100%;
  }
  
  
  &lt;style type="text/css"&gt;
  
  div {
  border : 2px solid red;
  }
  
  #bottom-banner {
  height:40%;
  }
  
  #bottom-banner tbody {
  position:relative;
  height:100%;
  width:100%;
  }
  
  #bottom-banner tr {
  max-height:100%;
  width:100%;
  position:relative;
  height:100%;
  }
  #bottom-banner table {
  position:relative;
  height:100%;
  width:100%;
  }
  
  #bottom-banner div {
  position:relative;
  height:100%;
  width:100%;
  }
  
  #bottom-banner img {
  height:100%;
  position:absolute;
  right:0;
  left:0;
  margin:auto;
  top:0;
  bottom:0;
  width:auto;
  }
  &lt;/style&gt;
  
  &lt;div id="bottom-banner"&gt;
  
  &lt;table&gt;&lt;tbody&gt;
  &lt;tr&gt;
  &lt;td &gt;
  &lt;div&gt;&lt;img src="11a2.jpg"/&gt;&lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td &gt;
  &lt;div&gt;&lt;img src="11a2.jpg"/&gt;&lt;/div&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;/tbody&gt;&lt;/table&gt;
  &lt;/div&gt;
  </code></pre>