How to add a horizontal scrollbar to an HTML table with CSS?

Spread the love

Sometimes, we want to add a horizontal scrollbar to an HTML table with CSS.

In this article, we’ll look at how to add a horizontal scrollbar to an HTML table with CSS.

To add a horizontal scrollbar to an HTML table with CSS, we set the overflow property.

For instance, we write

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

table tbody {
  display: table;
  width: 100%;
}

to make the table a block element with display: block;.

We show the scroll bar when the content overflows with overflow-x: auto;.

And we make the table stay in 1 row with white-space: nowrap;.

Then we make the tbody fill the width with

table tbody {
  display: table;
  width: 100%;
}

To add a horizontal scrollbar to an HTML table with CSS, we set the overflow property.