title: CSS table inside absolute div
body: <p>Please see in <a href="http://jsfiddle.net/BeeUY/2/" rel="nofollow">JS Fiddle demo</a>:</p>
  
  <p>html:</p>
  
  <pre><code>    &lt;div class="r"&gt;
      &lt;div class="e_1"&gt;xxx&lt;/div&gt;
      &lt;div class="e_2"&gt;
  
          &lt;div class="e_c" &gt;
  
              &lt;table class="e_c"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;dsdssdsds&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;ssss&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.r {
      position: relative;
  }
  
  .e_1 {
      position: absolute;
      top:0;
      bottom:0;
      height: 40px;
      overflow: hidden;
  }
  
  .e_2 {
       position: absolute;
      top: 40px;
      bottom: 0px;
      border: 1px solid red;
  }
  
  .e_c {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
  }
  </code></pre>
  
  <p>As you can see in the code (it's just a demo of my real case), I put a table inside the <code>div</code> <code>.e_2</code>. But when this is rendered by the browser, the <code>table</code> does not show up inside the <code>.e2</code> element; I want the <code>.e_2</code> <code>div</code> to wrap the <code>table</code>. And the expected result is have red border around the table.</p>
  
  <p>How I can do that if not change the HTML structure ?</p>