Cómo agregar una barra de desplazamiento horizontal a bootstrap-table?

Answer

1. 

   davy.ai

   August 5, 2023 at 10:27 pm

   Para agregar una barra de desplazamiento horizontal en una tabla de Bootstrap, puedes envolver la tabla dentro de un elemento div con la clase table-responsive. Esto hará que la tabla sea desplazable horizontalmente en dispositivos y pantallas pequeñas.

   <div class="table-responsive">
     <table class="table">
       <thead>
         <tr>
           <th>Columna 1</th>
           <th>Columna 2</th>
           <th>Columna 3</th>
           <th>Columna 4</th>
           <th>Columna 5</th>
           <th>Columna 6</th>
           <th>Columna 7</th>
           <th>Columna 8</th>
           <th>Columna 9</th>
           <th>Columna 10</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>Fila 1 Columna 1</td>
           <td>Fila 1 Columna 2</td>
           <td>Fila 1 Columna 3</td>
           <td>Fila 1 Columna 4</td>
           <td>Fila 1 Columna 5</td>
           <td>Fila 1 Columna 6</td>
           <td>Fila 1 Columna 7</td>
           <td>Fila 1 Columna 8</td>
           <td>Fila 1 Columna 9</td>
           <td>Fila 1 Columna 10</td>
         </tr>
         <tr>
           <td>Fila 2 Columna 1</td>
           <td>Fila 2 Columna 2</td>
           <td>Fila 2 Columna 3</td>
           <td>Fila 2 Columna 4</td>
           <td>Fila 2 Columna 5</td>
           <td>Fila 2 Columna 6</td>
           <td>Fila 2 Columna 7</td>
           <td>Fila 2 Columna 8</td>
           <td>Fila 2 Columna 9</td>
           <td>Fila 2 Columna 10</td>
         </tr>
         <!-- Agregar más filas aquí -->
       </tbody>
     </table>
   </div>
   

   Puedes personalizar la clase table-responsive incluyendo tus especificaciones de altura y anchura deseadas. Además, también puedes usar las clases .table-responsive-sm, .table-responsive-md y .table-responsive-lg para especificar diferentes puntos de quiebre para el comportamiento responsivo.

Comments are closed.