Come posso forzare il ridimensionamento di una tabella Bootstrap rispetto al contenitore principale?

Question

Sto creando un'applicazione simile a un foglio di calcolo utilizzando una tabella Bootstrap. Un utente può alternare la visibilità delle colonne, aggiungere/eliminare colonne, ridimensionare, ecc.

Ho bisogno che la tabella sia in grado di scorrere orizzontalmente quando un utente sceglie di ridimensionare una colonna, così come aggiungerne di nuove, ma Bootstrap cerca di adatta la tabella nel contenitore genitore. Una tabella di base 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> 

E il codice per ridimensionare (credito per user686605 su SO):

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

Demo in questo violino: https://jsfiddle.net/xc0v6gkk/1/

sul ridimensionamento, è possibile vedere la tabella le intestazioni che non vengono ridimensionate diventano più piccole per adattarsi alla larghezza crescente della colonna ridimensionata. C'è un modo in cui posso forzare quelle colonne a rimanere della stessa larghezza e forzare il tavolo a crescere più largo del suo genitore, rivelando una barra di scorrimento orizzontale nel processo?

Quando si aggiungono abbastanza colonne, la tabella supera i limiti del relativo elemento principale, ma il ridimensionamento non è più possibile.

ho cercato di controllare la larghezza sul ridimensionamento e aumentare il div quando la tabella raggiunge una certa larghezza, ma ancora non sono in grado di mantenere trascinando la colonna ulteriormente in senso orizzontale come la larghezza aumenta del 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

Penso che sia importante per me sapere perché il ridimensionamento smette di funzionare quando la tabella inizia a traboccare. Il processo di ridimensionamento è un po 'complicato, ma è qualcosa che può essere ottimizzato. Non riesco proprio a capire perché il ridimensionamento smetta di funzionare quando la tabella trabocca.

Answer 1

È possibile forzare la tabella a ridimensionare alla larghezza desiderata ogni volta che viene aggiunta una nuova colonna. puoi moltiplicare la larghezza della colonna il numero di colonne aggiuntive e aggiungerla alla larghezza iniziale.

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/

Avrai bisogno di giocare con le impostazioni per ottenere questo posto su.