css - Horizontal scrolling a table -


on webpage here have table has many columns , exceeds it's holder in x direction. in css have set horizontal slider shown , people can use navigate left/right across table. achieved using overflow-x: auto; in css.

but slider looks outdated , firefox doesn't support slider altering far. that's why decided want disable slider altering overflow overflow-x: hidden;. hid slider away, can't scroll table left/right.

are there easy solutions can use scroll table left/right while scrollbar remains hidden? usage of mouse wheel or hold & pull actions fine.

this 1 works horizontal if have visible scrollbar

update: added dragscroll script

src: http://qnimate.com/javascript-scroll-by-dragging/

#container1{      height: 50px;      width: 200px;      border: 1px solid;      overflow: hidden;  }    #container2{      width: 100%;      height: 99%;      overflow: auto;      white-space: nowrap;      padding-bottom: 25px;   /* push scrollbar out of sight */      margin-top: 15px;      cursor:move;  }
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>    <div id="container1"><div class="dragscroll" id="container2">      hello 1      hello 2      hello 3      hello 4      hello 5      hello 6      hello 7  </div><div>


Comments