overflow: how to make a table scroll only on x axis?

Question

Let's say I have a table, with such and such columns. I want to avoid the table overflowing outside the window, so I wrap it with a div:

<div class="table-wrapper">
    <table> 
        <!-- etc. -->
    </table>
</div>

and I give that div the following CSS:

.table-wrapper {
    overflow: auto;
}

It worked very well for a while. But then I needed a table with column of <select> elements. In that case, I don't want the table to scroll, and I prefer the select to go outside the wrapper (instead of an uncomfortable inner scroll). I thought splitting it up to x and y would be it:

.table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
}

But apparently not. For some reason, overflow-y isn't taken into consideration and the table still uses a scroll for the y axis. Here's a demo showing this. here's the desired behavior

1. the first table should not scroll downwards, instead it should be visible
2. the second table should scroll sideways
3. And of course, the third table should combine the two - it should scroll on the x-axis and it shouldn't scroll on the y-axis (have it visible)

What's the solution here?

update

It seems that the visible value is a lie:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.

It's like a recessive gene, it only works if everything else is visible, and if you define the other axis as anything else it automatically conforms to auto because W3C hates making any sense, and loves making my life a lot harder.

So now it seems the answer I'm looking for is a hacky workaround of sorts (and unless there's absolutely no other option, using specific pixels for either width or height is not an accepted solution. Com'on, I need to be a tad more flexible than that)

Answer 1

try using

    .table-wrapper {
    overflow-x: auto; //allows the div to scroll horizontally only when the div overflows.
    overflow-y: hidden; //does not allow for the div to scroll vertically
}

Answer 2

you can scroll along x-axis even when overflow hidden using jquery. This code will scroll x-axis.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
 $(function() {

   $("YourSelector").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});
</script>