Làm cách nào để buộc bảng Bootstrap đổi kích thước rộng hơn vùng chứa mẹ?

Question

Tôi đang tạo một ứng dụng giống bảng tính bằng cách sử dụng bảng Bootstrap. Người dùng có thể chuyển đổi chế độ hiển thị cột, thêm/xóa cột, đổi kích thước, v.v.

Tôi cần bảng để có thể cuộn theo chiều ngang khi người dùng chọn đổi kích thước cột, cũng như thêm cột mới, nhưng Bootstrap cố gắng phù hợp với bảng vào thùng chứa chính. Một bảng Bootstrap cơ bản:

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

Và mã để thay đổi kích thước (tín dụng để user686605 trên 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 trong fiddle này: https://jsfiddle.net/xc0v6gkk/1/

On thay đổi kích thước, bạn có thể xem bảng tiêu đề không được thay đổi kích thước trở nên nhỏ hơn để vừa với chiều rộng ngày càng tăng của cột được đổi kích thước. Có cách nào mà tôi có thể buộc các cột đó ở cùng độ rộng và buộc bảng phát triển rộng hơn bố mẹ của nó, để lộ thanh cuộn ngang trong quá trình không?

Khi bạn thêm đủ cột, bảng sẽ vượt quá ranh giới của phụ huynh, nhưng thay đổi kích thước không còn có thể.

Tôi đã thử để kiểm tra độ rộng đã đổi kích thước và tăng div khi bàn đạt đến một độ rộng nhất định, nhưng bạn vẫn không thể giữ kéo cột tiếp tục theo chiều ngang bằng chiều rộng của div tăng:

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

Tôi nghĩ điều quan trọng đối với tôi là phải biết lý do tại sao thay đổi kích thước ngừng hoạt động khi bảng bắt đầu tràn. Quá trình thay đổi kích thước là loại khó tính, nhưng đó là một cái gì đó có thể được tinh chỉnh. Tôi chỉ không thể hiểu tại sao việc thay đổi kích thước ngừng hoạt động khi bảng bị tràn.

Answer 1

Bạn có thể buộc bảng thay đổi kích thước thành chiều rộng mong muốn mỗi lần thêm cột mới. bạn có thể nhân chiều rộng cột số cột bổ sung và thêm cột đó vào chiều rộng bắt đầu.

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/

Bạn sẽ cần phải chơi với các thiết lập để có được vị trí này trên.