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.