Bootsrap下拉菜单由div剪切，溢出-x：滚动

Question

我知道这个主题是经常发生的，但是，我在“stackoverflow＆＃39;中找到了一些建议。但他们都没有得到预期的结果。

基本上我需要一个容器内的表（例如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)); 
            });
        });

当前：

所需：

使用jQuery ：