Implement Sticky Table Headers/Footers/Columns In Bulma Framework

Category: CSS & CSS3 , Table | January 8, 2026
Authorcityssm
Last UpdateJanuary 8, 2026
LicenseMIT
Views534 views
Implement Sticky Table Headers/Footers/Columns In Bulma Framework

A Pure CSS extension that helps Bulma developers create tables with sticky headers, footers, and/or columns to make your large datasets more readable and accessible.

How to use it:

1. Ensure that your project includes the Bulma CSS framework, as Bulma Sticky Table relies on it for styling.

<link rel="stylesheet" href="/path/to/cdn/bulma.min.css">
<link rel="stylesheet" href="/path/to/bulma-with-sticky-table.css">

2. Add the following CSS classes to the HTML table.

  • has-sticky-header: Make table header sticky
  • has-sticky-footer: Make table footer sticky
  • has-sticky-column: Make the first column sticky
<table class="table has-sticky-header has-sticky-footer has-sticky-column">
  ...
</table>

Changelog:

v3.0.2 (01/08/2026)

  • Update bulma to 1.0.4

v3.0.1 (03/19/2025)

  • Updated bulma to 1.0.3
  • Replaced deprecated sass @import with @use.

v3.0.0 (05/21/2023)

  • Dropping support for older versions of Bulma. Now requires v1 or better.

v2.1.0 (06/05/2023)

  • Fix when a sticky header or footer is used in a modal over a page with a fixed navbar.

You Might Be Interested In:


Leave a Reply