css溢出-x不能在内部使用绝对定位元素

Question

我有一个需要水平滚动的巨大表格，并且在<td>中有一个绝对位置列表，如果列表太长，它将被表格隐藏。因此，如何使用overflow-x并同时显示列表。

我认为代码段解释清楚。

table {
  border: 1px solid rgb(0, 0, 0);
}
td {
  border-top: 1px solid rgb(0, 0, 0);
}
ul {
  margin: 0;
  padding: 0 10px;
  list-style-type: none;
}
.table-wrapper {
  width: 100px;
  overflow-y: visible;
  overflow-x: scroll;
}
.table2-wrapper {
  width: 100px;
/*   overflow-x: scroll; */
}
.parent {
  position: relative;
}
.child {
  top: 100%;
  position: absolute;
  border: 1px solid #1e90ff;
  background-color: #e9e9e9;
}

<div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Letters</th>
          <th>Drinks</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="parent">A
            <div class="child">
              <ul>
                <li>Aa</li>
                <li>Ab</li>
                <li>Ac</li>
              </ul>
            </div>
          </td>
          <td>Coffee</td>
        </tr>
        <tr>
          <td>B</td>
          <td>Tea</td>
        </tr>
      </tbody>
    </table>
</div>

<div>
I only need the horizontal scroll bar, and I want the list to be visible!
</div>

<div class="table2-wrapper">
    <table>
      <thead>
        <tr>
          <th>Letters</th>
          <th>Drinks</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="parent">A
            <div class="child">
              <ul>
                <li>Aa</li>
                <li>Ab</li>
                <li>Ac</li>
              </ul>
            </div>
          </td>
          <td>Coffee</td>
        </tr>
        <tr>
          <td>B</td>
          <td>Tea</td>
        </tr>
      </tbody>
    </table>
</div>

Answer 1

这是您要寻找的吗？