どのようにして、ブートストラップテーブルのサイズを親コンテナよりも大きくすることができますか？

Question

私は、ブートストラップテーブルを使用してスプレッドシートのようなアプリケーションを作成しています。ユーザーは列の可視性の切り替え、列の追加/削除、サイズ変更などを行うことができます。

ユーザーが列のサイズを変更したり、新しい列を追加したりするときに水平スクロールできるようにするには、テーブルを親コンテナに合わせます。基本的なブートストラップテーブル：

<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); 
    } 
    } 
}); 

EDIT

テーブルがオーバーフローしたときにリサイズが停止する理由を知っておくことが重要だと思います。サイズ変更のプロセスは一種のものですが、調整が必要なものです。テーブルがオーバーフローしたときにサイズ変更がなぜ機能しなくなったのか分かりません。

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/

あなたは上のこの場所を取得するために設定して再生する必要があります。