Scrollable table with fixed header and left column using css

Here are the methods to create a table with a fixed header and a scrollable body.

Before proceeding, enhance your understanding by exploring this comprehensive guide on HTML tables.

1.

Using position: sticky and overflow-y

This method employs position: sticky on the table header to keep it fixed at the top, while overflow-y: auto on the container enables vertical scrolling for the table body.

• The .table-container div sets a maximum height and enables vertical scrolling, ensuring the table body is scrollable.
• The thead th elements are styled with position: sticky and top: 0, keeping the header row fixed at the top during scrolling.

2.

Using display: block for Table Sections

This approach sets display: block on the table’s <thead> and <tbody> to allow independent scrolling of the body while keeping the header fixed.

• Setting display: block on <thead> and <tbody> allows the table body to scroll independently from the header.
• The .table-container div provides a fixed height and enabl
  how to fix table header and footer in html
  how to freeze thead in table html