下拉菜单在表格单元格内被剪切。表需要溢出-x：滚动

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等）时会被剪切。我已经看到使用“溢出：可见”的建议，但是我的情况要求表格可以水平滚动。

我也曾尝试过z-index，但没有成功-我宁愿避免使用javascript遍历DOM树，因为它与AngularJS应该工作的方式相反。

任何帮助将不胜感激。