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显示的内容。这是理想的行为

第一个表不应该向下滚动，而应该是可见的
第二个表格应该向侧面滚动
当然，第三个表应该合并两个 - 应该在x轴上滚动而不应该在y轴上滚动 （有visible）

这里的解决方案是什么？

更新

似乎the visible value is a lie：

如果您对visible或overflow-x和overflow-y使用visible 对于另一个，visible以外的东西。 auto值为。{1} 解释为visible。

它就像一个隐性基因，只有在其他一切都是auto的情况下才有效，如果你将另一个轴定义为其他任何轴，它会自动符合W3C，因为{{1}}讨厌任何意义，并喜欢让我的生活更加困难。

所以现在看起来我正在寻找的答案是各种各样的hacky解决方法（除非绝对没有其他选择，否则使用宽度或高度的特定像素不是公认的解决方案。＃39; on，我需要比那更灵活 tad

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
}

Answer 2

即使使用jquery隐藏溢出，也可以沿x轴滚动。此代码将滚动x轴。

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

溢出：如何使表格仅在x轴上滚动？

2 个答案: