javascript - 最后一个表格单元格上的下拉菜单被切断 - React Bootstrap

Question

我有一个反应引导表，每行的最后一个单元格都有一个下拉菜单。overflow:hidden直到最后一行都很好，下拉菜单由于表格元素而被切断。我想保留它，如果我禁用它，那么每当我将鼠标悬停在列标题上时，都会有一个长高亮通过表体高度。overflow hidden保持高亮列相对于表体。

我该如何克服这个问题？我尝试构建自己的自定义下拉菜单，如下所示：

表格组件：

<tbody>
 {this.state.apps.map((app)=>{
                      return <AppRow />;  
                    })}
</tbody>

批准组件：

<tr>
 <td>cell1</td>
 <td>cell2</td>
 <td>last cell</td>
 <div>dropdown menu</div>
</tr>

这个设置很好，它不会被切断，但下拉菜单总是在第一行的顶部，它应该在相应表格行的顶部。因此，如果我单击最后一行，下拉菜单不会出现在相应的表格行中，而是出现在第一个表格行的顶部。

有没有人遇到过这个问题？您的帮助将不胜感激！

标签： javascriptcssreactjsbootstrap-4react-bootstrap

Answer 1

请尝试下面的css它应该可以解决问题。

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: absolute !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}