CODEWITHSUNDEEP
htmlcssscrollscrollbarcss-tables
Vetterjack
Vetterjack

Reputation: 2505

Hide table scrollbar

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.

Upvotes: 6

Views: 41321

Answers (4)

Desarrollalab
Desarrollalab

Reputation: 397

Just add the next css code

/* width */
::-webkit-scrollbar {
    width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

We hope this help

Upvotes: 1

Harshith J Poojary
Harshith J Poojary

Reputation: 331

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>

Upvotes: 1

Dikshitkumar
Dikshitkumar

Reputation: 43

.hideScrollbar::-webkit-scrollbar{
  display: none; 
 }
<div class='hideScrollbar'></div>

Upvotes: 0

Rokin
Rokin

Reputation: 2147

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.

Upvotes: 5

Related Questions