How to visually expand an HTML element within a div block?

Question

I have split up my HTML page using div blocks. Within one of the div blocks, I have created a table. I want this table's width to expand to all available space.

2 problems: A) If I set the table's width to 100%, it appears to expand to the size of the entire page, not the div block. B) Furthermore, it doesn't appear to be clipped by the parent div block (i.e. it overflows).

If I use frames, this problem would go away... but I don't want to use frames.

Does anyone have a solution using HTML/CSS?

Answer 1

You need a static width on your container div:

div.container { width: 400px; overflow: hidden; }
div.container table { width: 100%; }

<div class="container">
  <table><tr><td>something</td></tr></table>
</div>

Answer 2

You probably want to set the table's position css attribute to relative for the relative sizing to work.