CSS: How to render div as 100% of parent not child

Question

Hey all,

I am trying to create a scollable panel within a table cell.

What I would like is for the div to be as wide as the table cell and then render scrollbars for the content.

When I try the following the div sets its width to 100% of the contained span tag not the cell

<table cellpadding="3" width="90%" align="center" border="0">
  <tr>
    <td>
       <div style="border: solid 1px red; height: 10px; width: 100%; overflow: auto;">
          <span style="width: 2000px;">a</span>
       </div>
    </td>
  </tr>
</table>

I was under the impressing that width=100% should size on parent not on child?

Any ideas

Thanks

Answer 1

An empty table cell has no width, the span is the one that's forcing the width of the cell. That's why the div width is equal to the cell width.

Answer 2

I tried it within a containing div instead of a table and it works fine.

I assume that the inner span width is causing the td width to be 2000px