2 Ways to Writing Better CSS

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.

Wiki Education Dashboard Students Page

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.

Wiki Education Dashboard Students Page

Sticky Header Implementation Link

Thanks for giving it a read!

Sejal Khatri

Written by

Hire Me!!! UX Research/Design — Actively seeking job opportunities @ United States https://www.sejalkhatri.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade