Table with fixed header and fixed column on pure CSS

css

responsive-design

sticky-positioning

css3

byNikita Barsukov·Dec 28, 2024

For a fixed header and column in a CSS-only table, use position: sticky;. Set top: 0; on the thead element, and left: 0; on the first th or td in every tr. Ensure these offset elements have a background-color.

th { 
  position: sticky;
  background-color: #fff;
}

thead th {
  top: 0; /* King of the vertical hill */
}

th:first-child {
  left: 0; /* The horizontally immovable object */
  z-index: 1; /* Rises like a phoenix above other cells */
}

Pro tip: Utilize z-index for proper layering and remember - position: sticky; might give Internet Explorer a nasty stomach-ache.

Optimal solution walk-through

Dividing table for enhanced functionality

Embrace the power of division. Partitioning your table into header, first column, and the rest ensures a nimble footed performance and super flexibility.

The quirks and kinks of browser compatibility

position: sticky; is generally well-behaved with today's browsers, but a vintage collection may demand something extra. Occasionally, like a demanding houseguest, IE might need a custom-made polyfill for comfort.

Jazzing up with CSS3

Shadows, gradients, and transitions - oh my! CSS3 comes loaded with all the bling, ready to enhance your sticky table while ensuring functionality isn't hampered.

Territories marked with column widths

Mark your territories with fixed column widths in sticky positioning, and save yourself from the horrors of content shifts during horizontal scrolling.

Meeting challenges head-on

Unite under `table-layout: fixed`

Uniformity is divine for columns. Command column sizes with table-layout: fixed and bid adieu to discrepancies in column widths.

Overflow regulation

In the scrollable realm, let the table header reign with overflow-y: scroll on the containing element. Keep contextual understanding in the picture, always.

Where inline-block shines

In the alignment world, display: inline-block is our unsung hero. But remember, heroes come with their own story arcs. Understand its impact on your table's responsive behavior.

Mobile browsing smoothness

WebKit browsers on mobile offer a unique scrolling experience. Introduce -webkit-overflow-scrolling: touch to throw open the doors to buttery smooth scrolling.

Going beyond the basics

Scroll syncing demystified

When 'sticky position' seems like a bridge too far, JavaScript can step in to sync the scroll positions, offering a consistent user experience - kind of like a surprise spa day for client-side rendering.

Nest to the rescue

Dealing with split tables? Get cozy with nested divs as an alternative. They may not be cells, but they capture row and column behaviors adorably, while allowing independent scroll and positioning.

The limits of pure CSS

Pure CSS - as pure as driven snow. But it's not a miraculous antidote. Be aware of its limitations, especially concerning dynamic content or with crotchety cross-browser compatibility. Always keep your testing hat on and a backup plan ready.

explain-codes / Css / Table with fixed header and fixed column on pure CSS

Linked

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



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



Css table-cell equal width



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



Can you do this HTML layout without using tables?

