How to Create a Table with Fixed Headers and a Scrollable Body using Tailwind CSS

Create a Table with Fixed Headers and Scrollable Body using Tailwind CSS

In this article, we will learn how to create a table with fixed headers and a scrollable body using Tailwind CSS. This is useful when you have a large table, and you want the user to be able to scroll through the body without losing sight of the column headers.

Table Structure

To create a table with fixed headers and a scrollable body, we need to have two parts: a table head () and a table body (). The table head will contain the headers and will remain fixed at the top. The table body will contain the data and will be scrollable.

CSS Styling with Tailwind CSS

We will use Tailwind CSS to style our table. We need to apply the following CSS classes:

• relative to the table container for fixed headers
• sticky to the table head for making it fixed
• overflow-y-auto to the table body for enabling vertical scrolling

Example HTML Markup

Here's an example markup with a table containing 5 columns and 10 rows of data:

Additional Tips

• You can use min-h-[300px] or a specific height to limit the height of the table body.
• Use the w-full class to make the table fill its container width.
• Use text-left or text-center for alignment.
• You can customize borders using various classes such as border, border-gray-300 or border-b.

Summary

• Divide the table into a fixed header () and scrollable body ().
• Apply CSS classes to the parent container, headers, and body: relative, sticky, and overflow-y-auto.
• Customize the table appearance using Tailwind CSS utility classes.

References

• Tailwind CSS - Sticky
• Tailwind CSS - Overflow
• MDN CSS - Position