2 Ways to Writing Better CSS

Last week, I worked on adding Sticky Header functionality to a Nested Table of which each row contained a subtable. In this post, I’ll share the things I learned while implementing this functionality and a link to the code.

1. Avoid using fixed pixel dimensions for the width property

2. Understand the Stacking Context

You can read more about it here — Stacking Context

Sticky Header for Tables

  • Internal scrolling — This can be done using the overflow CSS property. But in this case, the user will have to interact with 2 scroll bars on the page and having multiple scroll bars on a single page would confuse the users which would lead into a bad user experience.
  • Window Scrolling — Applied when the data to be scrolled is the main focus of the page. It should also be used when the Table has a nested Table because internal scrolling for multiple tables would further confuse the users.

Table without Sticky Header —

Wiki Education Dashboard Students Page

Table with Sticky Header

Wiki Education Dashboard Students Page

Sticky Header Implementation Link

Thanks for giving it a read!

Design Researcher | Get in touch: linkedin.com/in/sejalkhatri/

Design Researcher | Get in touch: linkedin.com/in/sejalkhatri/