如何強制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/

你需要使用這些設置來獲得這個位置。