Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/05/2013, 17:30
MidnightMoon
 
Fecha de Ingreso: abril-2013
Mensajes: 6
Antigüedad: 11 años
Puntos: 1
Tabla dentro de div con ancho dinamico

Saludos a todos.
Estoy recurriendo a ustedes, ya que tengo un problema con unos contenedores.
En una parte de mi sitio, tengo una estructura del siguiente tipo.
Código HTML:
Ver original
  1. <div>
  2.     <div class="scrollTable">
  3.         <table class="dataTable">
  4.         <table>
  5.     </div>
  6. </dv>
El segundo div adopta el ancho al 100% del div contenedor. Este segundo div tiene un overflow, para cuando la tabla contenido es más ancha, se muestre la barra de desplazamiento.
Esto funcionaba bien, ya que las anchuras de los divs eran fijas a 980px.
Pero ahora, estoy transformando el sitio para que se adapte dinamicamente, por lo tanto tengo que usar porcentajes para esta parte.

El problema es que al asignarle un porcentaje al div, este se vuelve dependiente del ancho de la tabla, por lo tanto se desborda mi contenido, ya que por lo regular, el ancho de la tabla es más grande que el div contenedor.

El CSS para estos elementos, actualmente es el siguiente:
Código CSS:
Ver original
  1. .scrollTable{
  2.     min-width: 980px;
  3.     width: 100%
  4.     position: relative;
  5.     overflow-y: hidden;
  6.     overflow-x: scroll;
  7. }
  8. .dataTable{
  9.     border-collapse: collapse;
  10.     border-spacing:  0px;
  11. }

Para el div contenedor, simplemente es un width con porcentaje obtenido de otro div superior, por lo tanto no vi necesario ponerlo.

Espero me puedan ayudar con esto.

Nos estamos leyendo.