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 */

UPDATE

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">
<thead>
<tr>
<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>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>

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; }

Fiddle: http://jsfiddle.net/5WsEt/

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;">
<table>...</table>
</div>

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



Submit