如何强制引导表调整大小比其父容器更宽？

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/

你需要使用设置来获得这个位置。