CSS: раскрывающееся меню скрыто свойством переполнения контейнера

Question

Я редактирую большой проект с большим количеством существующего кода, поэтому я не могу изменить HTML структуры таблицы, но я могу изменить CSS.
Большая часть контента длинная и намерение это сделать прокрутку .container слева направо, если содержимое переполнено.
В коде ниже, если вы измените свойство overflow-x *1005* на auto или scroll, которое я хочу для этого выпадающее меню, которое вызывается ссылкой CLICK ME, отображает только то, что находится внутри контейнера, и обрезает все, что находится за его пределами. Есть ли способ обойти это?

https://codepen.io/lorvenji95/pen/ExaGePz

body {
  background-color: pink;
}
.container {
  margin-top:100px;
  height: 150px;
  width: 100%;
  background-color:grey;
  overflow-x: inherit;
  max-height: 150px;
}


td {
  font-size: 30px;
}

.foo {
  color: red;
}

.dropdown-menu{
  right:20px;
  top:-30px;
  position: absolute;
  z-index: 2147483549;
}

tr:nth-child(1) td .dropdown-menu {
  top: -30px !important;
}

tr:nth-last-child(-n+2) td .dropdown-menu{
  top: -165px;
}
a.dropdown-toggle {
  position: absolute;
  z-index: 999;
  right: 20px;
}
.open > .dropdown-toggle.btn-bitbucket {
  color: #ffffff;
  background-color: #163758;
  border-color: rgba(0, 0, 0, 0.2);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.js"></script>


<div class="container">
  <table>
     <td>
      Option1
    </td>
     <td class="foo">
      CLICK
        <div class="dropdown">
          <a href="#" class="dropdown-toggle" id="options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            .....
        </a>
        <ul class="dropdown-menu pull-right" aria-labelledby="options">
            <li><a href="/admin/orders" class="link">Associated Orders</a></li>
            <li><a href="/admin/items" class="link">Associated Items</a></li>
            <li><a href="/admin/colors" class="link">Associated Colors</a></li>
            <li><a href="/admin/waitlist/by-customer" class="link">Associated Lists</a></li>
            <li><a href="/admin/shopping-cart" class="link">Associated Carts</a></li>      
            <li><a href="/admin/waitlist/others" class="link">Others</a></li>
            <li><a href="/admin/waitlist/account" class="link">Account</a></li>
        </ul>
    </div>
    </td>
     <td>
      Option3
    </td>
     <td>
      Option4
    </td>
    <td>
      Option5
    </td>
     <td>
      Option6
    </td>
    <td>
      Option7
    </td>
     <td>
     Option8
    </td>
     <td>
     Optio9
    </td>
     <td>
      Option10
    </td>
    <td>
      Option11
    </td>
     <td>
      Option12
    </td>
    <td>
      Option13
    </td>
     <td>
      Option14
    </td>    
  </table>
  
</div>

Answer 1

Привет, я не знаю точно, о чем вы просите. Я решил, что не знаю, как это решит ваши проблемы. Пожалуйста, измените это ниже css и попробуйте. Спасибо и извините, если не сработало, как вы ожидали.

.container {
  margin-top:100px;
  height: 150px;
  width: 100%;
  background-color:grey;
  overflow-x: auto;
  max-height: 150px;
}
td {
  font-size: 30px;
  vertical-align:top;
}
tr:nth-child(1) td .dropdown-menu {
  top: 0 !important;
}
.dropdown-menu{
  right:20px;
  top:0;
  position: relative !important;
  z-index: 2147483549;
  transform: none !important;
}