How to display scroll bar onto a html table

Fixed headers and scrollable body

If you require a table with fixed headers and a scrollable body, you'll have to play around with your CSS a bit. The trick is to use absolute positioning on the <thead> and control the <tbody> with a fixed height and overflow; thus, keeping your headers in view at all times.

/* Applying some Hogwarts magic to fix the table headers */
.scrollable-table-header {
  position: sticky;
  top: 0;
  background: #f3f3f3; /* No invisibility cloaks, choose a distinct color for headers */
}

.scrollable-table-body {
  height: 150px;
  overflow: auto; /* Opens the Marauder's Map to reveal overflowing content */
}


Incorporate these styles in your HTML:

<div class="scrollable-table-container">
  <table>
    <thead class="scrollable-table-header">
      <!-- Your column titles sitting right here -->
    </thead>
    <tbody class="scrollable-table-body">
      <!-- And here goes the data, as much as you fancy -->
    </tbody>
  </table>
</div>


Responsive design and sweet styling

A successful web design ensures tables respond well on different device sizes. You can use media queries to manage the responsiveness of headers and a min-width property on the table to prevent layout disarray. A tasteful touch of color for headers also helps fit them into the layout.

@media (max-width: 600px) {
  .scrollable-table-header {
    font-size: 14px; /* Because mobile devices prefer small talk */
  }
}

table {
  min-width: 300px; /* To make sure columns do not starve and shrink */
}


"Divide and Rule" agenda

A good strategy for complex scenarios is to split content across two tables: a fixed header for the first, and a scrollable div for the second table. This way, your content flows methodically, even if you're dealing with a flurry of data.

Picking the right UI tools

Remember, several UI component libraries offer out-of-the-box scrollable tables with fixed headers. These can be a shortcut for those seeking advanced aesthetics and functionality. They come with comprehensive CSS classes and provide a thorough codebase for adaptations.

Additional ergonomics

Improving user experience goes beyond essential functional requirements. Consider adding overflow: scroll to the encapsulating div, providing an ever-present scrollbar. This gives an impression of extended content and encourages user engagement.

.scrollable-div {
  overflow: scroll; /* Showing that there's more than meets the eye */
}


Additionally, enabling a sticky header with position: sticky; top: 0; for your <thead> element ensures the headers aren't lost while navigating through the data.