How to Create a Bootstrap 3 Table with a Fixed Header and Scrollable Body?

Implementing Table Fixed Header with Scrollable Content

In this article, we will address the challenge of creating a table with a fixed header and scrollable body using Bootstrap 3. The solutions explored aim to preserve the Bootstrap aesthetic without compromising functionality.

The Challenge

A conventional Bootstrap table, as demonstrated in the example provided, presents issues with setting the height for the table body. Despite setting the height to 10px, the result remains unchanged. This issue requires an alternative approach.

Fixed Header with Sticky Positioning

A simple yet effective solution involves utilizing CSS sticky positioning. This approach involves assigning position: sticky; top: 0; to the table header (th) elements, ensuring they remain fixed at the top of the table. Here's a breakdown of the implementation:

.tableFixHead          { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

In the above code, we create a container with the class tableFixHead, which includes overflow: auto; to make the table scrollable and a height of 100px to define the visible portion. The table header elements are assigned position: sticky; top: 0; to make them fixed at the top of the scrollable area.

This approach works effectively in modern browsers such as Chrome, Firefox, and Edge.

The above is the detailed content of How to Create a Bootstrap 3 Table with a Fixed Header and Scrollable Body?. For more information, please follow other related articles on the PHP Chinese website!