Problema con tabla dentro de div con overflow:auto

[kriss8725]

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.

[webosiris]

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.

[kriss8725]

Iniciado por webosiris

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.

[Andreslrz]

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>

[Andreslrz]

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>

[pzin]

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