0

Estoy haciendo una tabla con divs usando bootstrap, mi problema es el siguiente, necesito que la "tabla" haga un scroll horizontal conforme no se vea mas información, pero la primera columna se quede fija.

div.table.prueba {
  overflow-x: auto;
  width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="table-prueba">
            <div class="row">
                <div class="col">Columna1</div>
                <div class="col">Columna2</div>
                <div class="col">Columna3</div>
                <div class="col">Columna4</div>
                <div class="col">Columna5</div>
                <div class="col">Columna6</div>
            </div>
        </div>

No tengo la posibilidad de hacerlo en a ver si alguien puede hecharme una mano! gracias!!

2

2 respuestas 2

1

Acá hay una solución que podría ayudarte:

<div class="container">
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th class="pinned">Pin</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
                <th>Cabecera</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="pinned">Pinned 1</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
            </tr>
            <tr>
                <td class="pinned">Pinned 2</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
                <td>Celda</td>
            </tr>
        </tbody>
    </table>
</div>

Y en tu archivo de estilos.css

th, td {
    white-space: nowrap;}
.pinned {
    position: absolute;
    width: 5em;
    margin-left: -5em;}
.table-responsive {
    overflow-x: scroll;
    width: 600px;
    margin: 0 auto;}

Cambié tu "table" dado que estabas utilizando divs y personalmente considero más sencillo utilizar los "th" de toda la vida. Le apliqué overflow-x: scroll; a los estilos de tabla para que tenga scroll horizontal y position: absolute; a la clase "pinned" para que tus primeras celdas esten siempre visibles.

Si tienes alguna duda con el código, estaré agradecido de responderte.

-1

Intenta con esto:

.table-prueba {
  overflow-x: auto;
  width: 100%;
  margin-left:100px;
}


#prueba {
   position: absolute;
    background-color: #b5c8ca;
      margin-left:-100px;

}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="table-prueba">
            <div class="row">
                <div class="col" id="prueba">Columna1</div>
                <div class="col">Columna2</div>
                <div class="col">Columna3</div>
                <div class="col">Columna4</div>
                <div class="col">Columna5</div>
                <div class="col">Columna6</div>
            </div>
        </div>

Checate este ejemplo en fiddle, está genial, creo es justo lo que buscas :)

1
  • 3
    Te invito a leer Cómo responder, si bien el aporte puede solucionar el problema, una explicación al código siempre se agradece
    – user128299
    el 26 oct. 2020 a las 20:32

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.