Bootstrap panel with responsive table inside

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.

Answers


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


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

Just write this for table horizontal scrolling in the panel body.


Better not to use panel-body, Put the table inside the panel tag, not to use Panel Body


This happens beacuse Panel has this class:

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

that force its width. Remove it and eveything will be ok :-)


Using container also has an impact on it. If Your layout does not have fixed layout, use container-fluid, and there will not be any problem with responsiveness of .table class.


Need Your Help

Android List widget question

android user-interface widget

I have been googling for a couple days now searching for a sortable list widget similar to the one provided by stock android music app. What I would like is ability to sort a list similar to how y...

two type parameters with the same name

scala generics

I am wondering why the two type parameters (named "A") with the same name ("A") is allowed as per the example below. I know this is a POOR naming of type parameters, don't do this.