How to prevent the vertical scroll of this div?

Question

I am not so into CSS and I have the following problem.

I have the following situation: into a page I have a very large table (that was horizontally truncated because it not entered in the page).

So to solve this issue I put this table into a scrollable div, something like this:

<div style="overflow-x: scroll;">
    // Into this div there is my original table
</div>

So I have used the overflow-x: scroll; property because I want that the content of the div is only horizontally scrollable (not vertically). But the problem is that I obtain this output:

As you can see the div content result scrollable also vertically and I don't want it. I can't post a fiddle because the inner table is rendered by a tag library.

How can I fix this issue and obtain only the horizzontal scroll? What am I missing?

Tnx

Answer 1

Try

<div style="overflow-x: scroll; overflow-y:hidden;">
    // Into this div there is my original table
</div>

Answer 2

The overflow-y: visible; should be there by default, there may be something else causing the scrollbar. Look at the overflow-y value for the various parent divs in Chrome debugger.

Answer 3

.div {
  overflow-x: scroll;
  overflow-y: hidden;
}

<div class="div">
</div>

Answer 4

make the overflow-y:hidden.

<div style="overflow-x: scroll;overflow-y:hidden;">
    // Into this div there is my original table
</div>

Answer 5

First give your div <div style="overflow: auto"> and see. If the scroll on the y-axis still shows, type <div style="overflow-x: auto; overflow-y: hidden">.