bảng Bootstrap với bảng đáp ứng bên

Question

Dưới đây là một liên kết JS Bin: http://jsbin.com/qiziyupo/4/edit?output

Bảng hồi đáp không shrink to fit bảng điều khiển. Làm thế nào tôi có thể sửa lỗi này?

EDIT: Tôi đang tìm một giải pháp trong đó bảng đáp ứng sẽ thay đổi kích thước để vừa với bảng điều khiển, mà không cần phải làm cho bảng lớn hơn.

Answer 1

Lớp .table-responsive chỉ được thiết kế để đáp ứng được trên các thiết bị di động ...

Từ các tài liệu Bootstrap 3.1.1 ...

Tạo bảng đáp ứng bằng cách gói bất kỳ .table trong .table-responsive để làm cho chúng cuộn theo chiều ngang lên đến các thiết bị nhỏ (dưới 768px). Khi xem trên bất cứ điều gì lớn hơn 768px rộng, bạn sẽ không thấy bất kỳ sự khác biệt trong các bảng

Nhưng bạn có thể thêm các lớp vào css của bạn mà không cần truy vấn phương tiện truyền thông và nhận được các chức năng tại bất kỳ khung nhìn.

Nhưng lưu ý rằng điều này không co lại bàn, nó chỉ cung cấp cho một thanh cuộn ngang ...

Dưới đây là .table-responsive lớp từ Bootstrap mà không cần truy vấn phương tiện truyền thông hạn chế nó để 768px và dưới đây.

.table-responsive { 
    width: 100%; 
    margin-bottom: 15px; 
    overflow-y: hidden; 
    overflow-x: scroll; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #ddd; 
    -webkit-overflow-scrolling: touch; 
} 

.table-responsive>.table { 
    margin-bottom: 0; 
} 

.table-responsive>.table>thead>tr>th, 
.table-responsive>.table>tbody>tr>th, 
.table-responsive>.table>tfoot>tr>th, 
.table-responsive>.table>thead>tr>td, 
.table-responsive>.table>tbody>tr>td, 
.table-responsive>.table>tfoot>tr>td { 
    white-space: nowrap; 
} 

Có hơn một vài quy tắc CSS cho .table-bordered mà tôi đã không bao gồm ...

Answer 2

Điều này xảy ra beacuse Panel có lớp này:

.col-md-3 { 
    width: 25%; 
} 

rằng buộc chiều rộng của nó. Hủy bỏ nó và eveything sẽ ok :-)

Answer 3

Better không sử dụng bảng điều khiển cơ thể, Đặt bàn bên trong thẻ bảng điều khiển, không sử dụng Bảng điều chỉnh Body

Answer 4

Sử dụng vùng chứa cũng có tác động đến nó. Nếu bố cục của bạn không có bố cục cố định, hãy sử dụng container-fluid và sẽ không có bất kỳ vấn đề nào với sự phản hồi của lớp học .table.

Answer 5

<div class="panel-body" style="overflow:scroll">    
    <table class="table table-bordered"> 

Chỉ cần viết này để cuộn ngang bảng trong phần thân bảng.