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

Posted 2023-02-22

【中文标题】如何强制引导表调整大小比其父容器更宽？

【英文标题】：How can I force a Bootstrap table to resize wider than its parent container?

【发布时间】：2016-09-03 02:50:06

【问题描述】：

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

编辑

我认为知道为什么当表格开始溢出时调整大小停止工作对我来说很重要。调整大小的过程有点挑剔，但它是可以调整的。我只是不明白为什么当表格溢出时调整大小停止工作。

【问题讨论】：

你在找这个吗？ jsfiddle.net/xc0v6gkk/2

不要使用 boostrap 表，而是使用一个可以放置 css 的类，例如：overflow-x : scroll

@Full.C 这绝对是我考虑过的事情。但是，该应用程序有各种模块，它们都使用 Bootstrap 表。我必须将非引导表的样式设置为看起来相似，而我的 css 技能对于这样的事情还不够好。这就是为什么我要寻找一种首先使用 Bootstrap 表的解决方案。

@IsmailFarooq 感谢您的评论。您能否提交一个答案来解释为什么会这样？我看到您为所有 th 和 tds 分配了固定宽度？

【参考方案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/

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

【讨论】：

感谢您的回答。如果您忽略网格的大小调整功能，这很好。一旦列的数量增加到足以使 div 开始溢出，调整大小将不再起作用。

我明白了，我会考虑一下，这很棘手，因为这是导致调整大小的原因。

最小宽度不适用于显示表格单元格或行属性

我知道如何让它工作，它涉及给表格一个等于所需列宽 * 列数的宽度。您将需要使用 javascript 在按钮单击时更新表格宽度。这应该确保宽度保持与填充表格宽度相同。