数据表在单元格内打开下拉列表

Question

我的CSS遇到了麻烦，但没有找到问题！

在我的数据表的最后一个单元格中，有一个下拉菜单，单击该菜单即可。

问题在于菜单“停留”在单元格中并向我显示滚动条！

我的小提琴：http://jsfiddle.net/oxs8fp4e/1/

这是我用于表初始化的代码，但是我认为问题在于主题的CSS内，而不是表初始化：

myTable = $('#tabellaArticoli').DataTable({
    responsive: {
            details: {
                type: 'column',
                target: 0
            }
        },
        paging: true,
        "pageLength": 100,
        "lengthMenu": [ [20, 50, 100, -1], [20, 50, 100, "Tutti"] ],
        "info": false,
        scrollCollapse: false,
        scrollX: false,
        scrollY: false,
        "columnDefs": [
            {
                orderable: false,
                className: 'control',
                searchable: false,
                targets:   0
            },
            { "orderable": false, "targets": 1 },
            { "width": "5%", "orderable": false, "targets": 'azioni' }
        ]
  });

相反，我想显示以下示例所示的下拉列表：https://keenthemes.com/metronic/preview/demo7/crud/datatables/basic/basic.html

有人可以帮我做我的CSS吗？

编辑：我已经将scrollX设置为false：这不是问题。我认为问题仅在CSS内

Answer 1

与“可能重复”注释中链接的问题几乎相同。您的表格和一个或多个包装元素分配了overlow: hidden;样式。

对于您而言，您可以执行以下操作以使整个弹出菜单变得可见。

1. 删除/覆盖overflow样式：

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

1. 更改内联样式定义的dropdown-menu元素的变换：

transform: translate3d(-120px, 20px, 0px);