Hide table scrollbar

Question

After some researches I found out that I have to set the tbody of a table

display: block;
overflow: auto;

to enable scrolling on a html table.

Is there a possibility to hide the scrollbar generic on every modern browser (Chrome, Safari, Firefox)? I tried some solutions like this one but it doesn't work on a table.

But my aim is that the table is scrollable and the scrollbars are't visible. When I am apply overflow: none; to the tbody it doesn't work. — Vetterjack, Apr 13 '15 at 13:46
Can you post fiddle with your problem? Hard to solve something I can't see. — dowomenfart, Apr 13 '15 at 13:47

score 5 · Answer 1 · answered Apr 13 '15 at 13:45

5

Use overflow: hidden; to hide the content outside of the container, or overflow: visible; to display it even if it's going outside of the container borders. Both remove the scrollbar.

answered Apr 13 '15 at 13:45

Rokin

1,697
2
23
30

Or maybe you want something like this: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll ? – Rokin Apr 13 '15 at 13:51

score 1 · Answer 2 · edited Oct 08 '20 at 19:50

1

You can remove scrollbar easily by using the following CSS class:

.overflow-hidden {
    overflow: hidden;
}

If you are using Bootstrap just use overflow functionality. Find docs here

<div class="overflow-hidden">...</div>

edited Oct 08 '20 at 19:50

Ezekiel

2,253
3
17
27

answered Mar 17 '20 at 03:32

Harshith VA

98
6
19

score 0 · Answer 3 · answered Jul 29 '20 at 05:39

0

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

<div class='hideScrollbar'></div>

answered Jul 29 '20 at 05:39

Dikshitkumar

13
4

Hide table scrollbar

3 Answers3

Linked