Bootstrap（2.3.2）下拉列表不能很好地用overflow-x set包装div

Question

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

简化示例小提琴：https://jsfiddle.net/w4s24Lgy/2/

<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>

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

我知道在某些浏览器中会发生这种情况，因为在一个维度上溢出的内容不会与其他维度中显示的内容完美匹配，但不知道如何修复它。

如何更改滚动或下拉列表中的一个或两个以便一起播放？