Buenas, estoy intentando hacer una maquetación con mis pocos conocimientos de HTML y CSS, y me he encontrado con un problema para hacer que se vea bien un scrolling. El problema me da al embeber dentro de una tabla un div(con el scrolling) y que contiene una tabla muy ancha: como resultado hace caso omiso del tamaño de la tabla "madre" (todos los tamaños son porcentajes).

Sin embargo el mismo código sin la tabla madre funciona (pero necesito la tabla madre). Y si pongo el DIV con un width en px en vez de en % también funciona... El problema es que necesito ambas cosas de manera que la tabla madre ocupe sólo la pantalla y no desborde A alguien se le ocurre alguna forma de conseguir hacer esto?

<table width="40%" border="1">
      <tr>
        <td>
          <div id="cambio" align="left" style=
          "border-style:solid; border-width:5px; width:100%; overflow:auto;">
          <table align="left" style="border-style:solid; border-width:2px;">
              <tr>
                <td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</td><td>des borda</td><td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</ td><td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</td><td> desborda</td><td>desborda</td><td>desborda</td><td>desborda</td><td>desbord a</td><td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</td>< td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</td><td>desb orda</td><td>desborda</td><td>desborda</td><td>desborda</td>                
              </tr>
            </table>
          </div>
        </td>
        <td>
          Normal
        </td>
      </tr>
    </table>
    <div id="cambio" align="left" style=
          "border-style:solid; border-width:5px; width:100%; overflow:auto;">
          <table align="left" style="border-style:solid; border-width:2px;">
              <tr>
                <td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</td><td>des borda</td><td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</ td><td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</td><td> desborda</td><td>desborda</td><td>desborda</td><td>desborda</td><td>desbord a</td><td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</td>< td>desborda</td><td>desborda</td><td>desborda</td><td>desborda</td><td>desb orda</td><td>desborda</td><td>desborda</td><td>desborda</td>                
              </tr>
            </table>
          </div>

Es que lo que hace el overflow:auto es que se muestren las barras de scroll si es necesario. En tu caso si es necesario. Pero no veo donde radica el problema. La tabla contiene otra tabla dentro. Y por ultimo hay otro div con otra tabla que ocupa todo el tamaño del documento (100%).

Podrias poner una imagen de como se ve y como quieres que se viera?. Asi me podria orientar mejor.

Saludos.

Sí, mejor con una imagen que sino es difícil de explicar. A ver, tenemos la estructura definida antes: una tabla que en una de sus celdas tiene un div. Y dentro del div una tabla muy ancha. Lo que pasa es que al aplicar porcentajes a los anchos de todos los ítems, la tabla ancha hace crecer al div y a la tabla madre hasta salirse de la pantalla:

Lo que pasa es algo así como si la tabla madre basara sus medidas en la tabla hija en vez de hacerlo sobre el div que debiera tener un tamaño de un porcentaje de la pantalla. Con lo que al final el div se alarga y no se usa el scroll y se sale todo del ancho de la pantalla.

Lo que quiero hacer es que el scroll del div se use y no se desborde en la pantalla:

Parece algo trivial, pero no lo es :-S (al menos para mí). De momento sólo he encontrado una solución muy cutre: con javascript hayar el tamaño de la pantalla y asignarle al DIV dinámicamente el ancho (para simular que realmente se usan porcentajes).

Un saludo y muchas gracias!

Asi es como lo veo yo. La tabla madre con un 40% del tamaño total y la de abajo que tiene un 100% de ancho. Usando overflow auto. Si usas overflow:normal se mostrara todo el flujo sin scroll y ahi si que se desborda todo el contenido.

Por cierto , llamas dos veces al mismo div

<div id="cambio">

<div id="cambio">

No puede haber dos id´s iguales puesto que cada id es unico de un elemento. En este caso , el primer div.

Si tienes dudas puedes pasarme el codigo completo de todo tu documento y lo revisare a conciencia.

Saludos.