Cómo representar div como 100% de padre no hijo

Question

Estoy intentando crear un panel desplazable dentro de una celda de tabla.

Lo que me gustaría es que el div sea tan ancho como la celda de la tabla y luego represente barras de desplazamiento para el contenido.

Cuando intento lo siguiente, el div establece su ancho al 100% de la etiqueta de intervalo contenida, no la celda

<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>

Estaba bajo la impresión de que width = 100% debería dimensionar en padre no en niño

¿Alguna idea?

Answer 1

Una celda de tabla vacía no tiene ancho, el espacio es el que está forzando el ancho de la celda. Es por eso que el ancho div es igual al ancho de la celda.

Answer 2

Lo probé dentro de un div que contiene en lugar de una tabla y funciona bien.

Supongo que el ancho del tramo interno está causando que el ancho de td sea 2000px