Раскрывающееся меню попадает в ячейку таблицы. Таблица требует переполнения-х: прокрутки

Question

У меня есть таблица, которая требует [overflow-x: scroll], и раскрывающийся список внутри. Вот пример: http://plnkr.co/edit/q3rqVlt7W0yVvqQBSDxZ?p=preview

Вот структура таблицы с использованием библиотеки oi-select

<table>
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Fixed Left
      </td>
      <td style="border: solid 1px black; overflow: visible">
        <div style="width: 400px; overflow-x: scroll;">
          <table>
            <thead>
              <tr>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
                <th>
                  column1column1column1column1
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <oi-select id="dropdown" oi-options="item.name for item in shopArr track by item.id" ng-model="bundle" placeholder="Select"></oi-select>
                </td>
                <td>
                  column1column1column1column1
                </td>
                <td>
                  column1column1column1column1
                </td>
                <td>
                  column1column1column1column1
                </td>
                <td>
                  column1column1column1column1
                </td>
                <td>
                  column1column1column1column1
                </td>
                <td>
                  column1column1column1column1
                </td>
                <td>
                  column1column1column1column1
                </td>
                <td>
                  column1column1column1column1
                </td>
                <td>
                  column1column1column1column1
                </td>
                <td>
                  column1column1column1column1
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Проблема в том, что раскрывающийся список (ui-select, oi-select, bootstrap и т. Д.) При открытии обрезается. Я видел предложения использовать «overflow: visible», но в моей ситуации требуется, чтобы таблица могла прокручиваться горизонтально.

Я также безуспешно поиграл с z-index - я бы предпочел не обходить дерево DOM с помощью javascript, так как это противоречит тому, как AngularJS должен работать ..

Любая помощь будет принята с благодарностью.