HTML Table Responsive solution

Table Responsive Solution 1:  Simple 

Add a wrapping div around the table.

<div class="responsive-table">
<table>
...
<table>
</div>

 then add some css:

.responsive-table

{

width: 100%;

overflow-y: auto;

_overflow: auto;

margin: 0 0 1em;

}

Table Responsive Solution 2: Scrollbars for iOS

Add some additional CSS to Work in iOS

.responsive-table::-webkit-scrollbar

{

-webkit-appearance: none;

width: 14px;

height: 14px;

}

.responsive-table::-webkit-scrollbar-thumb

{

border-radius: 8px;

border: 3px solid #fff;

background-color: rgba(0, 0, 0, .3);

}

Table Responsive Solution 3: scrollbars for everyone

all browsers and devices  display scrollbars, by adding these JQuery 

1. jScrollPane
2. Custom content scroller
3. Tiny Scroller

Table Responsive Solution 4: adding a gradient

Responsive tables looks “cut off” at the right edge. to give this a “fade in” look, you have to add a linear-gradient.  just add two new elements to the markup.

HTML

<div class="responsive-table-outer">

<div class="responsive-table-fade"></div>

<div class="responsive-table">

<table>

...

<table>

</div>

</div>

</div>

 Additional CSS

.responsive-table-outer { position: relative; }

.responsive-table-fade

{

position: absolute;

right: 0;

width: 30px;

height: 100%;

background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,.5), #fff);

background-image: -moz-linear-gradient(0deg, rgba(255,255,255,.5), #fff);

background-image: -ms-linear-gradient(0deg, rgba(255,255,255,.5), #fff);

background-image: -o-linear-gradient(0deg, rgba(255,255,255,.5), #fff);

background-image: linear-gradient(0deg, rgba(255,255,255,.5), #fff);

}