Html 引导（2.3.2）下拉列表不能很好地使用带有overflow-x集合的包装div

我有一个页面，上面有一堆表格，有很多列。这些表需要单独滚动。每个按钮的第一列包含一个bootstrap 2.3.2按钮组，其中包括一个下拉菜单

简化的小提琴示例：

td内容诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类







td内容诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类







td内容诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类







td内容诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类，诸如此类
有些不是很宽，还有一些东西

当下拉菜单在较低的行上被触发时，它会被切断（实际上，它会移动到一个可滚动的y溢出区域）

我知道在某些浏览器中会发生这种情况，因为在一个维度中可见的溢出不会很好地处理其他维度中可见的内容，但我不知道如何修复它

如何更改滚动或下拉菜单中的一个或两个，使其能够很好地配合使用

<div style="overflow-x: scroll">
    <table style="width: 2000px">
        <tbody>
          <tr>
              <td style="width: 120px">
                  <div class="btn-group">
                      <button class="btn"><i class="icon-ok"></i></button>
                      <button class="btn"><i class="icon-remove"></i></button>
                      <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu">
                          <li><a href="#">Action 1</a></li>
                          <li><a href="#">Action b</a></li>
                          <li><a href="#">Action iii</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Yet Another Action</a></li>
                      </ul>
                  </div>                  
              </td>
              <td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td>
          </tr>
          <tr>
              <td style="width: 120px">
                  <div class="btn-group">
                      <button class="btn"><i class="icon-ok"></i></button>
                      <button class="btn"><i class="icon-remove"></i></button>
                      <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu">
                          <li><a href="#">Action 1</a></li>
                          <li><a href="#">Action b</a></li>
                          <li><a href="#">Action iii</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Yet Another Action</a></li>
                      </ul>
                  </div>                  
              </td>
              <td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td>
          </tr>
          <tr>
              <td style="width: 120px">
                  <div class="btn-group">
                      <button class="btn"><i class="icon-ok"></i></button>
                      <button class="btn"><i class="icon-remove"></i></button>
                      <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu">
                          <li><a href="#">Action 1</a></li>
                          <li><a href="#">Action b</a></li>
                          <li><a href="#">Action iii</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Yet Another Action</a></li>
                      </ul>
                  </div>                  
              </td>
              <td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td>
          </tr>
          <tr>
              <td style="width: 120px">
                  <div class="btn-group">
                      <button class="btn"><i class="icon-ok"></i></button>
                      <button class="btn"><i class="icon-remove"></i></button>
                      <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                      <ul class="dropdown-menu">
                          <li><a href="#">Action 1</a></li>
                          <li><a href="#">Action b</a></li>
                          <li><a href="#">Action iii</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Yet Another Action</a></li>
                      </ul>
                  </div>                  
              </td>
              <td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td><td style="width: 300px">td content blah, blah, blah</td>
          </tr>
        </tbody>
    </table>
    <div>Some not very wide other stuff</div>
</div>