假设我有一个带有此类列的表。我想避免表格在窗口外溢出,所以我用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
。它就像一个隐性基因,只有在其他所有条件都为
visible
的情况下才起作用,并且如果您将另一个轴定义为其他任何东西,它会自动与auto
一致,因为W3C
讨厌任何意义,并且热爱我的生活更难。所以现在看来,我正在寻找的答案是种种怪异的解决方法(除非绝对没有其他选择,否则不接受将特定像素用于宽度或高度的解决方案。对不起,我需要一点点比这更灵活)
最佳答案
尝试使用
.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
}
关于html - 溢出:如何使表格仅在x轴上滚动?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26827151/