Basic Responsive Table

The most straightforward implementation for achieving a responsive table requires a container with overflow-x: auto. This way, if the screen is too small to show the full content, a horizontal scrollbar will appear.

Here we’re presenting some data taken from Wikipedia for the projected future population of three countries. As you can see, we have a lot of columns, so a stylish scrollbar appears.

This is a good first step for making our table at least readable on mobile screens. 

But, we can make it better!

Basic Responsive Table With Sticky Column

Let’s now make the first column remain sticky as we scroll. In the past, to accomplish this, we had to use an external JavaScript library, but these days we can safely set position: sticky to the target elements. Happily, this new position value has decent browser support.

Here for more convenience, we’ve added the sticky class to the cells we want to remain sticky that fire these styles: 

1

/*CUSTOM VARIABLES HERE*/

2

3

.table-wrapper table .sticky {

4

  position: sticky;

5

  left: 0;

6

  z-index: 10;

7

}

8

9

.table-wrapper table td.sticky {

10

  background: var(--white);

11

}

Now we’re in a good shape. We’ve made sticky the most important table column, something definitely handy for our users. 

But, we can go a bit further!

Basic Animated Responsive Table With Sticky Column

Moving on, we’ll initially hide the country flags and show them after we start scrolling the table. At that point, we’ll also highlight the sticky cells by giving them an intense color.

Here we’ve added a few more styles and a little bit of JavaScript. Most importantly, by the time we start scrolling the table—at that point where our first column becomes sticky, we add the scrolling class to the table wrapper. This way, we’re able to know when our target cells are stuck and provide the associated styles.

Here’s the required JavaScript:

1

const tableWrapper = document.querySelector(".table-wrapper");

2

const scrollingClass = "scrolling";

3

4

tableWrapper.addEventListener("scroll", function () {

5

  if (this.scrollLeft > 0) {

6

    this.classList.add(scrollingClass);

7

  } else {

8

    this.classList.remove(scrollingClass);

9

  }

10

});

And some of the relevant styles:

1

/*CUSTOM VARIABLES HERE*/

2

3

.table-wrapper.scrolling .sticky {

4

  min-width: 75px;

5

  color: var(--white);

6

  background: var(--darkblue);

7

}

8

9

.table-wrapper.scrolling table th.sticky span {

10

  opacity: 0;

11

}

12

13

.table-wrapper.scrolling table td.sticky > span:first-child {

14

  opacity: 1;

15

}

16

17

.table-wrapper.scrolling table td.sticky > span:last-child {

18

  opacity: 0;

19

}

Conclusion

There are plenty of different patterns for creating responsive data tables. The pattern you’ll follow will depend on various factors like the data size, columns, design, etc. This tutorial has given you a quick way to enhance a responsive table that adds a scrollbar to it by making its first column sticky and animating it.

You can go from there as you wish: applying different animations, making other columns sticky, etc. There are no boundaries to your imagination! All in all, the final goal is to allow users to scan the data easily and understand what they’ve read.

Last but not least, position: sticky can be a great candidate for creating sticky table headers without pain. If you, however, are interested in a JavaScript implementation of this concept, have a look at this tutorial.

• 

  How to Create a Stylish Pricing Table With a Sticky Header

  Sticky pricing tables are perfect for showing products and services with long lists of comparable features–in this tutorial we’re going to create a pricing…

As always, thanks for reading! 

HTML References

• 

  HTML (Hypertext Markup Language)

  

  Ian Yates

  23 May 2023

• 

  HTML Element: table

  

  Andy Leverenz

  10 Feb 2023

• 

  HTML Element: tr

  

  Andy Leverenz

  10 Feb 2023

• 

  HTML Element: td

  

  Andy Leverenz

  10 Feb 2023