I am designing a user management tool where users will be made up of several groups.

Each group has its own table, but the table headings need to be sticky.

Example of a table with a sticky header

There could potentially be a situation where there are multiple tables on the webpage, each with its own sticky heading.

Is there a better way to display the groups of users? Should sticky tables be used - if yes, how can these effectively be displayed if there are multiple tables at any one time on the same page. Can this be solved by tabbing each table separately?

  • Do you mean each table would be in its own scrolling container?
    – Matt Obee
    Commented Dec 12, 2014 at 14:15
  • Is this what you mean by Sticky header tympanus.net/Tutorials/StickyTableHeaders
    – Chetan
    Commented Dec 12, 2014 at 14:26
  • How you display the tables will depend on how many there are and how important it is that users can see them at-a-glance. So, how many tables need to be on this page? And will a user need to be able to see all of them all the time? i.e. can you show one or two "main" tables, and hide the rest, requiring a click to reveal? \
    – dennislees
    Commented Dec 12, 2014 at 18:01
  • That is the most annoying fixed table header ever! Commented May 12, 2015 at 16:24

4 Answers 4


Using a reasonable fixed table height would be better than floating sticky headers (too distracting)

fixed tables


I am assuming from your description that 'sticky' headings in this sense is analogous to 'frozen' headings - I'm not sure how this could work otherwise (i.e. if the headings are 'pinned' to the top of a web page - given that you are going to have multiple tables - having multiple table headings pinned in place could get messy).

So to answer your question whether or not sticky table headers should be used for multiple tables on the same web page - it's best to avoid that approach.

If you want a good example of how you could do this, have a look at TSN's NHL Standings Tables.

In this example, you have frozen headers, frozen columns, tabs to switch between tables, multiple stacked tables - and it's RWD (Responsive Web Design - the UI, using one design, will adapt neatly to phones, tablets and larger screens).

Also note the 'left-right' scrolling of the table is done by either tapping or clicking on the side of the table you want to scroll to.

All-in-all, this is the best example of UI/UX I've seen that's RWD and can handle multiple tables on the same web page, with frozen headers and columns, and will give you great flexibility.

Hope that helps!


Answer seems to be highly dependant on the layout chosen, as per the sketch.

Rather than add sticky headers to an existing design, you may want to redesign layout to support them.


download bmml source – Wireframes created with Balsamiq Mockups


If all tables are related to "users" and the only difference between the different data sets is the user group then your suggested solution of accessing each group table via dedicated tab will work.

You can also further improve overall layout and provide more structure to the data set by using a list. This provides a more scalable solution and adds clarity. Below are two alternative options to a table view. option 1 discloses information in a more progressive manner while option 2 provides all the information upfront.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.