Css 使用“表格响应”隐藏下拉菜单

这里的示例：。单击“单击此处”按钮以查看实际情况。下拉菜单应显示以上所有内容

<div class="col-md-12">
    <div class="panel-group" id="accordionGroups">
        <div class="panel panel-default">
            <div class="panel-heading accordion-toggle" data-toggle="collapse" data-target="#XX">
                <span class="panel-subtitle">TITLE</span>
            </div>
            <div id="XX" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="col-md-12">
                        <div class="table-responsi">
                            <table class="table table-condensed table-hover table-striped">
                                <thead>
                                    <tr>
                                        <th>A</th>
                                        <th>B</th>
                                        <th>C</th>
                                        <th>D</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                                <span class="btn btn-default btn-xs dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">CLICK HERE<i class="fa fa-caret-down left-padding-low1"></i></span>
                                                <ul class="dropdown-menu">
                                                    <li>XXXXX</li>
                                                    <li>YYYYY</li>
                                                    <li>ZZZZZ</li>
                                                    <li>PPPPP</li>
                                                </ul>
                                            </div>
                                        </td>
                                        <td>BIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTE</td>
                                        <td>TEXT</td>
                                        <td>TEXT</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

标题
A.
B
C
D
点击这里

XXXXX
YYYY
ZZZZZ
购买力平价

BigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigTextBigText
正文
正文

引导应用

溢出-x:hidden

于

.table responsive

，一旦出现溢出，它实际上会在两个方向上对其进行剪切，以确保滚动条可访问。当然，您可以这样移除溢出：

.table-responsive {
    overflow:visible !important;
}

---

但它会打破反应灵敏的设计，因此，使用这种桌子布局，你就不走运了。另一方面，这种表格布局在移动设备上使用起来很糟糕，因此我建议使用以下选项之一：

是的，即使我遇到了同样的问题，但使用jquery它得到了修复，请查看下面的代码片段

我找到了这个@

因此，基于你，我会相应地改变，这对我是有效的

jquery mouse enter and mouse leave, you can try like this, for me its working fine
//Function to display/hide scroll on mouseenter/mouseleave
$(‘.slds-button–icon-border-filled’).each(function() {
$(this).on(‘mouseenter’,function() {

$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘visible’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘visible’);
//alert(“hello-mousenter”);
});
$(this).on(‘mouseleave’,function() {
// alert(“hello”);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘auto’);
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘hidden’);
});
});

---

确实如此。你想让它显示在溢出区外吗？是的，就像最重要的一样。谢谢。这一直是引导的一个问题：下拉列表和某些隐藏元素，如某些情况下的面板-请参阅和。您尝试了多个建议的解决方案，但没有成功。您完全改变了表格的布局-从表格中的滚动条，您现在有了一个

主体

，具有巨大的

宽度

。顺便说一句，

！重要信息

不是必需的。这正是我上面所说的意思“…它将破坏响应性设计…”！刚刚测试过。它确实解决了下拉菜单的问题，但使表格失去功能。谢谢你抽出时间。我仍然在寻找解决方案。只要CSS和Bootstrap继续，就没有“解决方案”。如果你真的不想以任何方式改变布局，而只是首先显示弹出窗口，那么你基本上只剩下一个JavaScript解决方案（hack）