如何让Bootstrap下拉菜单在Tabulator表格行外完整显示

我之前也碰到过一模一样的问题！光调z-index根本没用，核心原因是Tabulator的表格行默认设置了overflow: hidden，直接把超出的下拉菜单给裁掉了。下面是我亲测有效的解决方案：

1. 覆盖Tabulator行和单元格的overflow属性 #

Tabulator的.tabulator-row和.tabulator-cell默认都会限制内容溢出，我们需要用CSS强制把它们改成visible：

/* 让表格行允许内容溢出 */
.tabulator-row {
    overflow: visible !important;
}

/* 让单元格允许内容溢出（部分场景下需要） */
.tabulator-cell {
    overflow: visible !important;
}

2. 确保下拉菜单的层级足够高 #

虽然overflow是主要问题，但给下拉菜单加个更高的z-index可以避免和其他表格元素重叠：

.dropdown-menu {
    z-index: 9999 !important;
}

3. 完整可运行代码示例 #

把上面的CSS添加到你的页面中，修改后的完整代码如下：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://unpkg.com/tabulator-tables@5.2.3/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.3/dist/js/tabulator.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
.tabulator-row {
    overflow: visible !important;
}
.tabulator-cell {
    overflow: visible !important;
}
.dropdown-menu {
    z-index: 9999 !important;
}
</style>

<div id="example-table"></div>

<script>
var table = new Tabulator("#example-table", { 
    layout:"fitColumns", 
    height:"100%", 
    ajaxURL:"https://jsonblob.com/api/jsonBlob/1010194405638029312", 
    columns:[ 
        {title:"Report", field:"report_nom"}, 
        {title:"Last update", field:"report_updatedate", width:300}, 
        {title:"Action", field:"report_download", formatter:"html", headerSort:false, width:300} 
    ] 
});
</script>

这样修改之后，Bootstrap的下拉菜单就能完全突破表格行的限制，完整显示在行外了。

内容的提问来源于stack exchange，提问作者executable