Freeze the top row for an html table only (Fixed Table Header Scrolling)

html

responsive-design

sticky-headers

css-positioning

byAlex Kataev·Oct 25, 2024

Freeze your table header using pure CSS magic. This involves setting the thead position to sticky and having a top: 0. This trick ensures the header sticks at the top when one scrolls, without altering the table's scroll behavior. Check out the cool example:

<style>
  th {
    position: sticky;
    top: 0;
    background-color: #fff; /* You won't see through me */
  }
</style>
<div style="max-height: 150px; overflow: auto;">
  <table style="position: relative; width: 100%;">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <!-- I'm just here to make the scroll possible -->
    </tbody>
  </table>
</div>

Just grab this snippet, add it to your page, and voila! Your table headers will now remain visible as users stroll through the table's data.

Working the magic: Simple steps

Let's keep it simple! position: sticky allows us to dodge the need for messy JavaScript or split tables. Stick to one-table tactics to maintain a sleek, maintainable solution. What to remember? Here you go:

Positioning: Make sure your table has position: relative because all stickies need a context!
Overflow control: Wrap your table with a div with overflow: auto and a solid max-height. This is your ticket to scroll-town.
Sticky goodness: Slap position: sticky onto th with top: 0. This plants the header firmly at the top of the scroll container.
Browser quirks: Be friendly with each browser's take on position: sticky. A quick peek into documentation can help ensure proper fallbacks.
Crisp visuals: Your th elements need a solid background, because see-through headers are just creepy.

Stylish tables: Quick tips

Looks matter! The aura of your table is almost as crucial as its functionality. Here are some pro-tips:

Text Alignment: Align text left using text-align: left for a neat read.
Border Definition: Borders are your friends. They help your sticky header stand out from the rest of the scrolling crowd.
Z-index wizardry: A higher z-index on the header helps it to rise above the commoners during the scroll.

Pro-level insights

Let's crank it up a notch:

Responsive widths: Make sure your table is accommodating to screen changes with width: 100%.
Consistent widths: Match widths of header cells with body cells for a solid table look.
Block that display: Displaying the header row as block gives tbody its own private scroll party.

Clarity first: Transparency

Nothing ruins a table like a see-through header. Tackle that:

Opaque Backgrounds: th elements need a solid, non-transparent background color.
Recheck that padding: Adjust padding to allow headers to stand out with clear space around the text.

explain-codes / Html / Freeze the top row for an html table only (Fixed Table Header Scrolling)

Linked

Table fixed header and scrollable body



Table header to stay fixed at the top when user scrolls it out of view with jQuery



How do I create an HTML table with a fixed/frozen left column and a scrollable body?



Css: how do I create a gap between rows in a table?



Border style do not work with sticky position element

