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

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

let's have table, such , such columns. want avoid table overflowing outside window, wrap div:

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

and give div next css:

.table-wrapper { overflow: auto; }

it worked while. needed table column of <select> elements. in case, i don't want table scroll, , prefer select go outside wrapper (instead of uncomfortable inner scroll). thought splitting x , y it:

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

but apparently not. reason, overflow-y isn't taken consideration , table still uses scroll y axis. here's demo showing this. here's desired behavior

the first table should not scroll downwards, instead should visible the sec table should scroll sideways and of course, 3rd table should combine 2 - should scroll on x-axis , shouldn't scroll on y-axis (have visible)

what's solution here?

update

it seems the visible value lie:

if using visible either overflow-x or overflow-y , other visible other. visible value interpreted auto.

it's recessive gene, works if else visible, , if define other axis else automatically conforms auto because w3c hates making sense, , loves making life lot harder.

so seems reply i'm looking hacky workaround of sorts (and unless there's absolutely no other option, using specific pixels either width or height not accepted solution. com'on, need tad more flexible that)

try using

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

html css