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

Question

假设我有一个表，其中包含这样那样的列。我想避免表格溢出到窗外，所以我用一个div包裹起来:

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

然后我给那个 div 赋予以下 CSS:

.table-wrapper {
    overflow: auto;
}

有一段时间效果很好。但后来我需要一个包含 <select> 列的表元素。在那种情况下，我不希望表格滚动，我更喜欢选择到包装器之外(而不是令人不舒服的内部滚动)。我想把它分成 x 和 y 就是这样:

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

但显然不是。出于某种原因，overflow-y没有被考虑在内，表格仍然使用 y 轴的滚动条。这是一个 demo显示这个。这是所需的行为

1. 第一个表格不应向下滚动，而应该是可见的
2. 第二个表格应该横向滚动
3. 当然，第三个表格应该结合这两者 - 它应该在 x 轴上滚动并且不应该在 y 轴上滚动(有它 visible )

这里的解决方案是什么？

更新

似乎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.

它就像一个隐性基因，只有当其他一切都是visible时它才会起作用。 , 如果您将另一个轴定义为其他轴，它会自动符合 auto因为W3C讨厌有任何意义，喜欢让我的生活变得更加艰难。

所以现在我正在寻找的答案似乎是一种变通的解决方法(除非绝对没有其他选择，否则使用特定像素的宽度或高度不是可接受的解决方案。来吧，我需要比那更灵活一点)

Answer 1

尝试使用

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