如何强制下拉列表溢出表包装？答案

【问题标题】：How to force the dropdown to overflow table wrapper?如何强制下拉列表溢出表包装？
【发布时间】：2022-01-20 04:46:55
【问题描述】：

我被困在如何让下拉菜单溢出它的容器，在我的例子中是一个表格单元格。

示例如下：

let content = document.querySelector('.content');
let abs = document.querySelector('.dropdown');
content.addEventListener('click', function () {
  abs.classList.toggle('is-hidden');
});

.wrapper {
  width: 500px;
  overflow-x: auto;
  overflow-y: visible;
}

.content {
  width: 1000px;
  height: 150px;
}
.content td {
  position: relative;
  border: 1px solid #ccc;
}

.dropdown {
  position: absolute;
  background: green;
  top: 30px;
  left: 10px;
  width: 100px;
  height: 300px;
}

.is-hidden {
  display: none;
}

<div class="wrapper">
  <table class="content">
    <tr>
      <td></td>
      <td><div class="dropdown"></div></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

上面提到的例子基本上模拟了bootstrap .table-responsive 类。我的目标是使包装器水平滚动，但允许下拉菜单垂直溢出。但是即使我设置了溢出-y：可见，包装器总是垂直滚动。

这可以通过某种方式实现吗？谢谢！

【问题讨论】：

标签： html css overflow dropdown tablecell

【解决方案1】：

用这个替换你现有的 CSS。

.dropdown {
    position: fixed;
    background: green;
    width: 100px;
    height: 300px;
}

【讨论】：

这只是导致内部 TD 滚动其内容。你能解释更多这应该如何帮助吗？我需要将 .dropdown 显示在包装器之外且没有垂直滚动。
我已经更新了答案。您必须将 position: fixed; 设置为 .dropdown.
非常感谢，但我仍然认为这对我来说不是一个好的解决方案。下拉菜单渲染得很好，但不会随页面滚动（或在包装器内水平滚动）。
我认为这里的桌子高度会产生问题。