Fixed Table Headers

A few months ago I built an example of fixed table headers that used CSS position: sticky, partly to demonstrate it is possible but mostly to try to dissuade client(s) from using a double-<table> approach or an all-<div> approach. Then I forgot, then CSS Tricks did a post, then I forgot, then a thing happened, and now here we are.

Standard HTML tables are not that complex. But when developers are unfamiliar with HTML or let third-party libraries generate them, they are usually an inaccessible over-engineered mess. One of the more common reasons I hear developers reach for them is because they want fixed headers. For simple tables, that is mostly unnecessary.

Everything in this post assumes a left-to-right, top-to-bottom reading order and language.

The CSS

For fixed column headers:

th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

For fixed row headers:

th[scope=row] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
}

If you plan to have both in one site (page, screen, whatever), then you may want to avoid conflicts with a more specific selector. After all, row headers will not work properly without scope="row", but column headers do just fine without a scope (and in my experience are generally absent).

th:not([scope=row]) {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

The different z-index values help ensure your column headers sit in front of your row headers. Otherwise the visible row header will look like it is for the column headers and that is just weird. While you are at it, make sure the header cells have a background color or you will get layered text.

For row headers, you may want to add a border on the right to make the clipping of adjacent cells a bit less weird. The problem is that CSS borders don’t work here. They just scroll away. A little trickery with a background gradient can solve that problem:

th[scope=row] {
  background: linear-gradient(90deg, transparent 0%, transparent calc(100% - .05em), #d6d6d6 calc(100% - .05em), #d6d6d6 100%);
}

Examples

View this example at Codepen.

See the Pen Fixed Table Header Demo by Adrian Roselli (@aardrian) on CodePen.

Responsive Uses

Obviously this approach can work well for responsive tables. I have shown how to use a scrolling container. That means we will definitely have a wrapper container and it also means it is likely to scroll independent of the page.

Note my selector is intentionally convoluted. I want to ensure that any overflow styles won’t be applied unless the container has tabindex (for keyboard users), along with a region role and accessible name (for screen reader users). Feel free to adjust for your own uptightness and target browser support.

div[tabindex="0"][aria-labelledby][role="region"] {
  overflow: auto;
}

Scrollbars are often hidden by default on mobile devices (and in some desktop browser configurations), so the visual affordance that the user needs to scroll is often gone. Using Lea Verou’s 2012 post Pure CSS scrolling shadows with background-attachment: local will add a bit of a shadow for the vertically-scrolling content, and Chen Hui Jing adapted it to a horizontal scroll. I tweaked them to use ems instead of px so they will scale better.

div[tabindex="0"][aria-labelledby][role="region"].rowheaders {
  background:
    linear-gradient(to right, transparent 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 4em 100%, 4em 100%, 1.4em 100%, 1.4em 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}

div[tabindex="0"][aria-labelledby][role="region"].colheaders {
  background:
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 100% 4em, 100% 4em, 100% 1.4em, 100% 1.4em;
  background-attachment: local, local, scroll, scroll;

Larger tables on narrow or short screens can end up scrolling in two directions. A WCAG auditor may argue this violates WCAG 2.1 SC 1.4.10: Reflow (Level AA), but data tables have an exception. Regardless, you should ensure the column header for the row headers does not disappear when scrolling left-right.

The easiest way to do that is grab the first header cell that is not also a row header and increase its z-index, making sure to also give it a border effect as I covered above:

th:not([scope=row]):first-child {
  left: 0;
  z-index: 3;
  background: linear-gradient(90deg, #666 0%, #666 calc(100% - .05em), #ccc calc(100% - .05em), #ccc 100%);
}

Example

View this responsive example on Codepen.

See the Pen Fixed Table Header Demo: Responsive by Adrian Roselli (@aardrian) on CodePen.

Compatibility Notes

visually-hidden Class

/* Proven method to visually hide something but */
/* still make it available to assistive technology */
.visually-hidden {
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

9 Comments

Reply

Larger tables on narrow or short screens can end up scrolling in two directions. It may violate WCAG 2.1 SC 1.4.10: Reflow (Level AA)…

For data tables, they generally fall into the 2-dimensional exception. The example does the right thing in wrapping each so that scrolling is restricted to that table.

That’s why the SC starts with “Content” rather than “Pages”, so that even if you have some content with horizontal scrolling, the page doesn’t need to.

In response to AlastairC. Reply

Alastair, yeah, I should have linked this reflow Understanding statement: Complex data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This Success Criterion therefore does not apply to data tables.

And I should have qualified it a bit more too to explain why I said may (because of overzealous auditors). Thanks for the comment.

Reply

Thank you so much hat was so simple. You sir, are a master.

Kamlesh Kar; . Permalink
In response to Kamlesh Kar. Reply

That is nice of you to say, but mostly I am building on others’ work.

Reply

It was really nice example. It really save my life today,
Thanks man

Chhatrai Mjajhi; . Permalink
Reply

Thank you Adrian. Simple and to the point.

Michael Samios; . Permalink
Reply

Impressive!

Reply

Thank you very much for giving me insight

Jeremiah; . Permalink
Reply

amazing. It’s working!

marcial glori; . Permalink

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>