Foros del Web » Creando para Internet » CSS »

Problema con tabla dentro de div con overflow:auto

Estas en el tema de Problema con tabla dentro de div con overflow:auto en el foro de CSS en Foros del Web. Hola buen día, mi problema es el siguiente tengo una tabla dentro de un div que tiene un alto definido con overflow auto, pero el ...
  #1 (permalink)  
Antiguo 07/10/2014, 08:19
 
Fecha de Ingreso: mayo-2009
Mensajes: 242
Antigüedad: 14 años, 10 meses
Puntos: 2
Pregunta Problema con tabla dentro de div con overflow:auto

Hola buen día, mi problema es el siguiente tengo una tabla dentro de un div que tiene un alto definido con overflow auto, pero el problema es que el elemento tabla se desborda de su elemento padre que es el div y no logro solucionar este problema, dejo una imagen como referencia. Saludos.

  #2 (permalink)  
Antiguo 07/10/2014, 22:03
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 1 mes
Puntos: 998
Respuesta: Problema con tabla dentro de div con overflow:auto

el div te va a medir el 100% del ancho de su elemento padre (#home) es evidente que si pones una tabla de 1541px de ancho en algo que no tiene ese ancho, se va a desbordar... no entiendo muy bien cual es la pregunta.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 08/10/2014, 07:57
 
Fecha de Ingreso: mayo-2009
Mensajes: 242
Antigüedad: 14 años, 10 meses
Puntos: 2
Pregunta Respuesta: Problema con tabla dentro de div con overflow:auto

Cita:
Iniciado por webosiris Ver Mensaje
el div te va a medir el 100% del ancho de su elemento padre (#home) es evidente que si pones una tabla de 1541px de ancho en algo que no tiene ese ancho, se va a desbordar... no entiendo muy bien cual es la pregunta.
Hola webosiris, en la imagen se muestra un sombreado color azul el cual se refiere a la tabla que se desborda dentro de un div que tiene overflow auto, mi pregunta es como puedo hacer para que esa tabla se oculte dentro del div y solo se pueda ver si realizo un scroll.
  #4 (permalink)  
Antiguo 08/10/2014, 09:52
Avatar de Andreslrz  
Fecha de Ingreso: septiembre-2008
Mensajes: 99
Antigüedad: 15 años, 6 meses
Puntos: 2
Respuesta: Problema con tabla dentro de div con overflow:auto

Justamente tengo el mismo problema, ademas que necesito que el div se autoajuste a la tabla.

Para el que no entendio la pregunta de kriss, es como hacer que la tabla este dentro del div y que en ves de salirce de el muestre un scroll bar, a mi me pasa lo mismo, el div contenedor de la tabla no la reconoce como si estubiera adentro, si no como una tabla que se solapa con el div.

Esto para mi caso, no creo otro tema porque este trata lo mismo.

CSS
Código:
#table_box {
    position: relative;
    background-color: #f8f8f8;
    display: inline-block;
    border: #e0e4ff 1px solid;
    margin-top: 10px;
    height: 400px;    
}
html
Código:
<div id="table_box">
                    <table>
                        <tr>
                            <th>N&uacute;mero ID</th>
                            <th>Nombre</th>
                            <th>Primer Apellido</th>
                            <th>Segundo Apellido</th>
                            <th>Tel&eacute;fono</th>
                        </tr>
                        <tr>
                            <td>dato1</td>
                            <td>dato2</td>
                            <td>dato3</td>
                            <td>dato4</td>
                            <td>dato5</td>
                        </tr>
                    </table>
                </div>
  #5 (permalink)  
Antiguo 09/10/2014, 08:15
Avatar de Andreslrz  
Fecha de Ingreso: septiembre-2008
Mensajes: 99
Antigüedad: 15 años, 6 meses
Puntos: 2
Respuesta: Problema con tabla dentro de div con overflow:auto

esto me funciono a mi para evitar que la tabla se salga del div

CSS
Código:
table#table_box {
    position:relative;
    display: inline-block;
    border: #ffd6d6 1px solid;
    margin-top: 50px;
    height: 400px;
    left: 50%;
    margin-left: -500px;
    overflow-y: scroll;
}
HTML
Código:
<table id="table_box">
                <tr>
                    <th><label>N&uacute;mero ID</label></th>
                    <th><label>Nombre</label></th>
                    <th><label>Primer Apellido</label></th>
                    <th><label>Segundo Apellido</label></th>
                    <th><label>Direcci&oacute;n Principal</label></th>
                </tr>
                <tr>
                    <td>dato1</td>
                    <td>dato2</td>
                    <td>dato3</td>
                    <td>dato4</td>
                    <td>dato5</td>
                </tr>
            </table>
  #6 (permalink)  
Antiguo 09/10/2014, 14:11
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Problema con tabla dentro de div con overflow:auto

Algo que mide más que su contenedor siempre va a quedar fuera. Se puede controlar el desbordamiento usando overflow (valga la redundancia crosslanguage) y ajustándolo a scroll. Para que eso funcione o bien el padre debe de tener un ancho menos que el hijo o el hijo uno mayor que el padre (que es parecido pero no igual).
__________________
(:

Etiquetas: imagenes, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:19.