Responsive Table Issues In Bootstrap

I am trying to make my table in bootstrap responsive. My issue is that when the window size becomes smaller... I have to scroll the page itself instead of the table. I want to make

Solution 1:

You could achieve this using overflow.

Just add table tbody { overflow: auto; }

https://jsfiddle.net/f061pk27/1/

Solution 2:

For solve responsive table problem in Safari :

.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
min-height: .01%;
overflow-x: auto;
}