Add a Horizontal Scrollbar to an HTML Table

Add a horizontal scrollbar to an HTML table

Did you try CSS overflow property?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto; /* Scrollbar is displayed as it's needed */


As other users are pointing out, this is not enough to add the scrollbars.

So please, see and upvote comments and answers below.

Add Horizontal Scroll bar to table in html

<div class="modal fade" id="new-modal" style="width:100%;overflow-x:scroll;">
<div class="tble-grid-wrapper">
<div class="table-responsive pl-3 pr-3">
<table id="selectedDevices" class="table table-sm table-striped" class="display">
<th>HEADER 1</th>
<th>HEADER 2</th>
<th>HEADER 3</th>
<th>HEADER 4</th>
<th>HEADER 5</th>
<th>HEADER 6</th>
<th>HEADER 7</th>
<th>HEADER 8</th>
<th>HEADER 9</th>
<th>HEADER 10</th>

Horizontal scroll on overflow of table

I think your overflow should be on the outer container. You can also explicitly set a min width for the columns. Like this:

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


How do I add a horizontal scrollbar to a table in a div?

You will not be able to add a scrollbar to a table, but you can add it to a DIV containing your table.

For example:

<div style="width: 400px; height: 200px; overflow: scroll;">

How can I add a horizontal scroll bar to a table only if it does not fit in the enclosing DIV?

Use overflow:auto.

Read & Test it here

Related Topics

Leave a reply