如何强制Bootstrap表格调整大小，使其宽度超过父容器？

Question

如何强制Bootstrap表格调整大小，使其宽度超过父容器？

javascriptjqueryhtmlcsstwitter-bootstrap

6

我正在使用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;
    }
  });
});

在这个 fiddle 中演示了: 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);
    }
  }
});

编辑

我认为了解为什么在表格开始溢出时调整大小停止工作很重要。调整大小过程有点棘手，但这是可以调整的。我只是不明白为什么当表格溢出时调整大小会停止工作。

- Niel Sarvari

你是否在寻找这个？https://jsfiddle.net/xc0v6gkk/2/ - Ismail Farooq

不要使用Bootstrap表格，而是使用一个类，您可以像这样放置CSS：overflow-x:scroll - Lemayzeur

@Full.C 这绝对是我考虑过的事情。然而，该应用程序有各种模块，所有模块都使用 Bootstrap 表格。我必须将非 Bootstrap 表格样式化以达到类似的效果，但我的 CSS 技能并不足够胜任这样的工作。这就是为什么我正在寻找首选使用 Bootstrap 表格的解决方案的原因。 - Niel Sarvari

@IsmailFarooq 谢谢您的评论。您能否提交一个答案，解释一下为什么这个方法可行吗？我看到您给所有的th和td分配了固定宽度？ - Niel Sarvari

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- OrderAndChaos · 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/

你需要调整设置才能完美呈现。