Boot device panel with responsive table inside

Question

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

The response table is not compressed to fit the panel. How can i fix this?

EDIT: I am looking for a solution in which a mutable table will change to fit the size of the panel, without having to increase the size of the panel.

Answer 1

The .table-responsive class is intended only to respond to mobile devices ...

From the Bootstrap 3.1.1 documentation ...

Create flexible tables by wrapping any .table in .table-responseive to make them scroll horizontally to small devices (under 768px). When viewed on a screen larger than 768 pixels, you will not see the differences in these tables.

But you can add a class to your css without a media request and get functionality in any viewport.

But note that this does not shorten the table, it only gives a horizontal scrollbar ...

Below are the .table-responsive classes from Bootstrap without a media query limiting 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 some more CSS rules for .table-bordered that I haven't included ...

Answer 2

It’s better not to use a panel, place the table inside the panel tag, so as not to use Panel Body

Answer 3

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

Just write this to scroll the table horizontally in the panel body.

Answer 4

It happens that this panel has this class:

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

which force its width. Delete it and everything will be fine :-)

Answer 5

Using a container also affects it. If your layout does not have a fixed layout, use container-fluid and there will be no problem with the responsiveness of the .table class.