Como Crear una Tabla con Cabecera Fija (Sticky) en Bootstrap 4

Bootstrap Tutoriales | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

Bootstrap cuenta con diferentes componentes, utilidades y elementos para crear vistas Front rápidamente, uno de los elementos importantes son las Tablas, en donde se pueden listar datos para un determinado objetivo, las tablas cuentan con sus propios elementos, uno de estos es la cabecera o thead y en este Post te enseñare como hacerla fija o que se quede pegada (sticky) cuando te diriges hacia abajo de la página.

Antes de continuar te invito a leer los siguientes artículos:

Si ya eres usuario avanzado de Bootstrap, puedes continuar, no hay problema, asimismo te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:

Spotify SoundCloud

Bien ahora continuemos con el Post: Como Crear una Tabla con Cabecera Fija (Sticky) en Bootstrap 4.

Para poder crear la funcionalidad de cabecera fija de una tabla, obviamente necesitamos una tabla HTML creada con Bootstrap 4, en el siguiente código tenemos la tabla respectiva con 6 nombres de postres.

Luego accedo a los elementos th de la cabecera y les agrego la propiedad position, topz-index y background color con los valores correspondientes y mi tabla la hago responsive con la clase .table-responsive de Bootstrap 4 y a esta clase le agrego las propiedades height y overflow con sus valores correspondientes para mostrar la barra de desplazaiento o scrollbar.

Entonces si voy a mi navegador y actualizo la página puedo ver que la cabecera de la tabla se queda fija.

Hay muchas formas de hacer esto, el que expongo en este Post es una de ellas. Al inicio de este Post he colocado una Demo y el código alojado en GitHub.

Conclusión

Cada proyecto puede tener un requerimiento diferente para hacer fija la cabecera de una tabla, el ejemplo que yo doy puede que funcione o no en tu código, pero es una base para que entiendas como se puede hacer fija la cabecera de una tabla de Bootstrap 4.

Nota

  • Los pasos mencionadas y el código utilizado en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a Bootstrap.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
2 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Ashley
Ashley
10 días atrás

Excelente tutorial , muchísimas gracias.