如何强制Bootstrap表调整大于其父容器的大小？

Question

我正在使用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://jsfiddle.net/xc0v6gkk/1/

在调整大小时,您可以看到未调整大小的表标题变小,以适应调整大小的列的增加宽度.有没有办法可以强制这些列保持相同的宽度,并强制表比其父级增长更宽,在此过程中显示一个水平滚动条？

添加足够的列时,表将超出其父级的边界,但不再可以调整大小.

我试图检查调整大小时的宽度,并在表达到一定宽度时增加div,但是当div的宽度增加时,你仍然无法继续水平拖动列:

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

    var docWidth = $('.wrapper').width(),
      gridWidth = $('#grid').width();

    if (docWidth - gridWidth == 15) {
      $('.wrapper').width(docWidth + 100);
    }
  }
});

编辑

我认为,当桌子开始溢出时,知道为什么调整大小停止工作对我很重要.调整大小的过程有点挑剔,但它可以调整.我只是无法理解为什么当表溢出时调整大小停止工作.

Answer 1

每次添加新列时，您可以强制将表格调整为所需的宽度。您可以将列宽乘以附加列数，然后将其添加到起始宽度。

var newCols = 0,
    width = 160,
    tableWidth = 400;

$('#add-col').on('click', function(e) {
    newCols++
    $('#grid').width(tableWidth + (width * newCols));
    $('thead tr').append('<th>Another</th>');
    $('tbody tr').append('<td>More</td>');
});

https://jsfiddle.net/xc0v6gkk/13/

您需要调整设置才能找到此位置。