0

I created a table which has a container that has a specific max height. I want to keep the scroll functionality for the overflowing table, but hide the scrollbar itself.

I tried some solutions that are present on the internet, but couldn't make this work.

HTML:

<div id="container">
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Coloumn</td>
    </tr>
</table>
</div>

CSS:

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

#container {
  max-height:200px;
  overflow:auto;
}

This is the jsfiddle I created to play with:

http://jsfiddle.net/k6rp1vsh/

Edit: The browser where the website needs to run in is Opera version 11 which does not support the newest features!

Thanks in advance!

Klyner
  • 3,983
  • 4
  • 26
  • 50
  • 1
    Does this answer your question? [Hide scrollbar (with scroll enabled)](https://stackoverflow.com/questions/22194382/hide-scrollbar-with-scroll-enabled) – F.NiX Feb 27 '20 at 09:40

5 Answers5

1

See the snippet. Let me know if you have any doubt.

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

#container {
  width: 100%;
    overflow: hidden;
    max-height: unset;
}

table#codexpl {
    display: block;
    width: 105%;
    max-height: 200px;
    overflow: auto;
}
<div id="container">
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Column</td>
    </tr>
</table>
</div>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Harshsetia
  • 256
  • 2
  • 6
1

add this in the css file

::-webkit-scrollbar {
 display: none;
}
mohameddrira
  • 82
  • 6
1

All you need to do is to set the scrollbar width to 0

#container::-webkit-scrollbar {
width: 0px;
}
maneroto
  • 153
  • 1
  • 10
0

Try this

::-webkit-scrollbar ::-webkit-scrollbar-track ::-webkit-scrollbar-thumb {
    display: none;
}
Aidil
  • 101
  • 1
  • 7
0

You can achieve it easily using CSS.

To hide the scrollbars, but still be able to keep scrolling, you can use the following code:

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.hide-scrollbar {
  -ms-overflow-style: none;
}

I've created this fiddle for you: http://jsfiddle.net/u105fbx4/

Add class="hide-scrollbar" to your DIV , like this.

HTML

<div id="container" class="hide-scrollbar">

and this to the end of CSS FILE:

 .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .hide-scrollbar {
      -ms-overflow-style: none;
    }
Raghav
  • 17
  • 4