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
How to Force a Long String Without Any Blank to Be Wrapped
Fixed Header, Footer With Scrollable Content
Unwanted Margin in Inline-Block List Items
Example of Multipart/Form-Data
How to Support Placeholder Attribute in Ie8 and 9
Maintain Image Aspect Ratio When Changing Height
Using CSS :Before and :After Pseudo-Elements With Inline Css
How to Close ≪Img≫ Tag Properly
Having Google Chrome Repeat Table Headers on Printed Pages
What Is the Functionality of !Doctype
Why Does Margin-Top Work With Inline-Block But Not With Inline