Bootstrap panel with responsive table inside

Question

Here is a JS Bin link: http://jsbin.com/qiziyupo/4/edit?output

The responsive table does not shrink to fit the panel. How can I fix this?

EDIT: I'm looking for a solution where the responsive table will resize to fit inside the panel, without having to make the panel larger.

Answer 1

The .table-responsive class is only designed to be responsive on mobile devices...

From the Bootstrap 3.1.1 documentation...

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables

But you can add the class into your css without the media query and get the functionality at any viewport.

But note that this does not shrink the table, it only gives a horizontal scroll bar...

Below is the .table-responsive classes from Bootstrap without the media query restricting it to 768px and below.

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

There are a few more CSS rules for .table-bordered that I did not include...