Geek Answers Handbook

How to make a Bootstrap table resize larger than its parent container?

I am creating a spreadsheet application using a Bootstrap spreadsheet. The user can switch the visibility of columns, add / remove columns, resize, etc.

I need the table to be able to scroll horizontally when the user chooses to resize the column and also add new ones, but Bootstrap is trying to map the table to the parent container. Bootstrap base table:

<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>

And the code for resizing (credit for user686605 on 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 this script: https://jsfiddle.net/xc0v6gkk/1/

When resizing, you can see that the table headers that are not resizing become smaller to fit the larger width of the resized column. Is there a way I can make these columns stay the same width and make the table grow wider than its parent by showing a horizontal scroll bar in the process?

When you add enough columns, the table will exceed the boundaries of its parent, but resizing becomes impossible.

I tried checking the width when resizing and enlarging the div when the table reaches a certain width, but you still can’t continue to drag the column horizontally as the width of the div increases:

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

I think it’s important for me to know why resizing stops working when the table starts to overflow. The resizing process looks pretty neat, but it can be resized. I just don't understand why resizing stops working when the table is full.

+5
source share
1 answer

You can force the table to resize to the desired width each time you add a new column. you can multiply the column width by the number of additional columns and add this to the initial width.

 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/

You will need to play with the settings to get this place.

0
source

More articles:


All Articles