Css 引导下拉菜单由div使用overflow-x:scroll剪裁

我知道这个主题是反复出现的，但是，我使用了“stackoverflow”中的几个建议，但没有一个得到预期的结果

基本上，我需要一个容器内的表（例如div），我可以水平滚动，因为可能有更多的元素（列）

一个解决方案是使用jQuery通过单击下拉按钮来增加容器的高度，但特别是，我认为这个选项很难看。

.table-outter {
overflow-x: scroll; 
overflow-y: hidden; 
width: 100%; }

<div class="table-outter">
<table class="table table-hover table-condensed" style="width: 1200px;">
...

        // FIT HEIGHT DIV
        var a = $('.table-outter').height();
        $('.dropdown-toggle').click(function() {
            var open = $(this).parent().hasClass('open');
            $('.table-outter').height((a));
            var b = $(this).siblings('.dropdown-menu').height();
            if(!open) { $('.table-outter').height((a+b)); }
            $("ul.nxw-dropdown li a").click(function() { 
                $('.table-outter').height((a)); 
            });
        });

。表格输出{
溢出-x：滚动；
溢出y：隐藏；
宽度：100%；}
...
//配合高度
变量a=$（'.table out'）.height（）；
$（'.dropdown toggle'）。单击（函数（）{
var open=$（this.parent（）.hasClass（'open'）；
$（'.table outter'）。高度（（a））；
var b=$（this）.sibbins（'.dropdown menu'）.height（）；
如果（！open）{$（'.table outter'）.height（（a+b））；}
$（“ul.nxw-下拉列表LIA”）。单击（函数（）{
$（'.table outter'）。高度（（a））；
});
});

当前：

所需的：

使用jQuery：

---

一把小提琴就好了……）