How to Add Horizontal Scroll Bar in HTML Table?

When working with tables that have a lot of columns or when the content inside the cells is too wide to fit within the viewport, it is frequently necessary to add a horizontal scroll bar to an HTML table. This ensures that the table maintains its usability and readability without affecting the webpage's layout. This article will guide you through the different methods for adding a horizontal scroll bar to HTML tables.

These are the following approaches we can use to add a Horizontal Scroll Bar in the HTML Table:

Using CSS overflow-x Property

This is the easiest approach to follow. A horizontal scroll bar can be added directly to the table element by setting the overflow-x property to auto or scroll.

Syntax:

<style>
 table {
 display: block;
 overflow-x: auto;
 white-space: nowrap;
 }
</style>
<table>
 <!-- table content -->
</table>

Example: This example demonstrates adding a horizontal scroll bar to the table using the CSS overflow-x property.

Output:

Using JavaScript

In some cases, you might need to use JavaScript to adjust the table or container properties to enable horizontal scrolling, especially when dealing with responsive designs.

Example: This example shows how to add a horizontal scroll bar using a combination of CSS and JavaScript.

Output: