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:

enter image description here

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

Have you tried `overflow-y: hidden;` instead `overflow-x: scroll;`? — lmgonzalves, Jun 19 '15 at 13:00
Great minds think alike @Imgonzalves - sorry for posting over you in the answers — Web Develop Wolf, Jun 19 '15 at 13:02
@LianeStevenson All it's OK. Also you post your answer almost simultaneously ;) — lmgonzalves, Jun 19 '15 at 13:04

score 3 · Accepted Answer · answered Jun 19 '15 at 13:01

3

Try

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

answered Jun 19 '15 at 13:01

Web Develop Wolf

5,996
12
52
101

score 2 · Answer 2 · answered Jun 19 '15 at 13:02

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.

answered Jun 19 '15 at 13:02

bjfletcher

11,168
4
52
67

score 2 · Answer 3 · answered Jun 19 '15 at 13:03

2

make the overflow-y:hidden.

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

answered Jun 19 '15 at 13:03

sonam gupta

775
6
17

score 2 · Answer 4 · answered Jun 19 '15 at 13:38

2

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">.

answered Jun 19 '15 at 13:38

ProblemChild

556
1
8
16

score 0 · Answer 5 · edited Feb 06 '18 at 10:43

0

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

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

edited Feb 06 '18 at 10:43

grg

5,023
3
34
50

answered Jun 20 '15 at 01:05

Ricardo

91
5

How to prevent the vertical scroll of this div?

5 Answers5

Linked