0

Mi problema son las 2 tablas de la Izquierda, las cuales quisiera que quedaran juntas como las de la Derecha y así aprovechar el espacio marcado de azul:

reporte

¿Cómo puedo hacer que la tabla de abajo se pegue a la de arriba y no donde acabe la tabla de la otra columna?

Código CSS para agrupar todas las tablas:

.tables-container{
            display: flex;
            justify-content: space-between;
            
        }

La estructura de las tablas:

<div class="tables-container">
    <table  border="1" width="40%">
    </table>
    <table  border="1" width="55%">
    </table>
    <table  border="1" width="40%">
    </table>
    <table  border="1" width="40%">
    </table>
</div>
0

2 respuestas 2

0

Estaría mucho mejor si das más detalles. ¿Usas Bootstrap? ¿Por qué no pones el código completo para ver las tablas y analizar mejor? Por ahora solo se me ocurre esto en tu CSS:

table td, table td * {
        vertical-align: top;
    }
0

lo que haría yo seria separarlos por 2 columnas y ahí recién integrar las tablas, acá te dejo el código de lo que yo haría:

.tables-container{
    display: flex;
    justify-content: space-between;

}
.container-column {
    width: 49%;
   
}
.container-table {
    border: 1px solid #ccc;
    margin-bottom: 15px;
}
<div class="tables-container">
    <div class="container-column">
        <div class="container-table" style="height: 200px;">
            <table  border="1"  >
                a
            </table>
        </div>
        <div class="container-table" style="height: 100px;">
            <table  border="1">
                b
            </table>
        </div>
        <div class="container-table" style="height: 100px;">
            <table  border="1">
                c
            </table>
        </div>
    </div>
    <div class="container-column">
        
        <div class="container-table" style="height: 300px;">
            <table  border="1">
                d
            </table>
        </div>
        <div class="container-table" style="height: 100px;">
            <table  border="1">
                f
            </table>
        </div>
    </div>
</div>

Espero ayudarte con esto, cualquier cosa me comentas, suerte!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.