小编Nie*_*ari的帖子

我正在使用Bootstrap表创建一个类似电子表格的应用程序.用户可以切换列可见性,添加/删除列,调整大小等.

当用户选择调整列的大小以及添加新列时,我需要表能够水平滚动,但Bootstrap尝试将表适合父容器.一个基本的Bootstrap表:

<div class="wrapper">
 <table id="grid" class="table">
  <thead>
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
 </table>
</div>

和调整大小的代码(在SO上信用到user686605):

$(function() {
 var pressed = false;
 var start = undefined;
 var startX, startWidth;

$("#grid").on('mousedown', 'th', function(e) {
    start = $(this);
    pressed = true;
    startX = e.pageX;
    startWidth = $(start).width();
    $(start).addClass("resizing");
  });

  $(document).mousemove(function(e) {
    if ( pressed ) {
      $(start).width(startWidth+(e.pageX-startX));
    }
  });

  $(document).mouseup(function(e) {
    if ( pressed ) {
      pressed = false;
    }
  });
});

这个小提琴的演示:https …