Categories
CSS

How to add horizontal scrollbar on top and bottom of table with CSS?

Spread the love

Sometimes, we want to add horizontal scrollbar on top and bottom of table with CSS.

In this article, we’ll look at how to add horizontal scrollbar on top and bottom of table with CSS.

How to add horizontal scrollbar on top and bottom of table with CSS?

To add horizontal scrollbar on top and bottom of table with CSS, we rotate the parent and child containers by 180 degrees.

For instance, we write

.parent {
  transform: rotateX(180deg);
  overflow-x: auto;
}

.child {
  transform: rotateX(180deg);
}

to set transform to rotateX(180deg) to rotate the parent and child.

Conclusion

To add horizontal scrollbar on top and bottom of table with CSS, we rotate the parent and child containers by 180 degrees.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *