Body tag automatically add horizontal scrolling when table has horizontal scroll and body has vertical scroll

Viewed 47

I am facing an issue regarding the horizontal scroll.

enter image description here

As you can see above pic page has 2 horizontal scrolls first one is for a table scroll and the second one is page scroll that is automatically added, now I don't want the second scroll on the page.

How can I achieve this? I can't use overflow-x: hidden as in some other screen I need body overflow-x: scroll.

Thanks.

1 Answers

Add overflow-x:auto to the parent of your scroll element.

.container{
  background-color:yellow;
  overflow-x:auto;
  
}
.tab{
  width:120vw;
  height:100px;
}
<div class="container">
  <div class="tab">Your Tabels</div>
</div>

And if it did not help, add overflow-x:none to your body Element

Related