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的宽度增加时，你仍然无法继续水平拖动列： / p>

$(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/

您需要使用这些设置才能获得此位置。

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

1 个答案: