Bootstrap table overlap on containing div on mobile view

Question

I have this problem wherein table element overlap to its containing div with has specific height and bottom content are being hidden. The table is within this div element

 <div class="inner bg-danger col-lg-12 col-md-12 col-xs-12">table element</div>

Here's the layout https://jsfiddle.net/0rkrd738/

I want table to be responsive to stay within its containing div with full content of it. I tried putting all class col-md, lg, xs still no avail. Kindly help me on how to solve this

Answer 1

If you want everything to fit inside a fixed height div, you need to make everything inside the div smaller so it fits, see fiddle https://jsfiddle.net/0rkrd738/2/

.red {
  background-color: red;
  height: 600px;
}

.blue {
  background-color: blue;
  height: 600px;
}

.yellowgreen {
  height: 500px;
}

.panel {
  height: 560px;
}

.panel-body {
  padding-top: 0px;
  padding-bottom: 0px;
}
.panel-footer {
  padding-top: 4px;
  padding-bottom: 4px;
}
td {
  padding: 1px !important;
}
table{margin-bottom: 0px !important;}

Answer 2

You can make the image way smaller and add the class table-responsive to the table's parent div (for really small screens). Here are some css:

.bg-danger .img-circle {
  max-height: 150px;
  width: auto;
}
.bg-danger .table-responsive {
  margin-bottom: 0;  
}
.bg-danger .panel-body {
  padding-bottom: 0;
}

see fiddle https://jsfiddle.net/0rkrd738/3/