UI/UX Designing.

Sejal Khatri

Apr 11, 2018·2 min read

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

If you define it in px then it will have a fixed width. On the other hand, if you define it in % it will be relative to its containing element or the screen width which will make your web page responsive and scalable. Also, if you use percentages then you don’t have to calculate the exact pixel values which will save you a lot of time.

2. Understand the Stacking Context

You must have experienced that in some cases changing the z-index value to higher number doesn’t change the display order of HTML elements. This can happen when 2 HTML elements are in different stacking context.

You can read more about it here — Stacking Context

Sticky Header for Tables

There are 2 ways to implement this:

• 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 —

After Scrolling down, a new user would find it difficult to understand the Table values because he/she can no longer see the header. This is particularly a problem with large scale projects because of the huge data sets.

Table with Sticky Header

Making the Header stick to the top when the User scrolls down the page is a good way to present the information. Especially for new users, who need not to memorize the header content or scroll back and forth to be able to understand the table contents.

Sticky Header Implementation — Link

Thanks for giving it a read!