CSS table inside absolute div - css

Question

Please see in JS Fiddle demo:
html:
<div class="r">
<div class="e_1">xxx</div>
<div class="e_2">
<div class="e_c" >
<table class="e_c">
<tr>
<td>dsdssdsds</td>
</tr>
<tr>
<td>ssss</td>
</tr>
</table>
</div>
</div>
</div>
css:
.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;
}
As you can see in the code (it's just a demo of my real case), I put a table inside the div .e_2. But when this is rendered by the browser, the table does not show up inside the .e2 element; I want the .e_2 div to wrap the table. And the expected result is have red border around the table.
How I can do that if not change the HTML structure ?

Answer 1

If you want just the table to have a red border use the border property:
border:1px solid red;
So in your case would be:
.e_c {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
border:1px solid red;
}
However if you really want the div to wrap around your table change the property of position from e_c and e_2 to relative:
.e_2 {
position: relative;
top: 40px;
bottom: 0px;
border: 1px solid red;
}
.e_c {
bottom: 0;
left: 0;
position: relative;
right: 0;
top: 0;
}
This would however make the div extend to the whole width unless you add the display property to your .e_2 class:
.e_2 {
display: inline-block;
position: relative;
top: 40px;
bottom: 0px;
border: 1px solid red;
}

Answer 2

See updated fiddle here: http://jsfiddle.net/designingsean/BeeUY/5/
The biggest issue is that the table does not need to be position:absolute, since its parent already is. That corrects the table placement, but then the border is not right. The best way to fix this is to put the border on the table itself, rather than the containing div.
The affected portions of the CSS:
.e_2 {
position: absolute;
top: 40px;
bottom: 0px;
}
.e_c {
border: 1px solid red;
}

Answer 3

.e_c table.e_c {
border:1px solid red
}