I fixated the two first left columns in my tables based on https://stackoverflow.com/a/17557830/1272712. The columns is only fixated, when the screen size is less than 768px - at which point the table is scrollable (see jsFiddle). It works great on Android, desktop Chrome and desktop Safari, but it doesn't work on iOS Safari and Chrome. Does iOS not support position:absolute?
If anybody else have any alternative implementations, I'll accept that as an answer.
I think you have stuck in min-width problem,
I will say that its simple to solve this in case you will convert pixel to em,
if you base size is 16px (by default it is same in all browsers)
then your PX to Em will be (px)768 / 16 = 48(em)
Now try changing Px to Em in the code Fiddle 0
also if you must stay with PX, then do something like this,
@media(max-width:768px !important)
fiddle 1
or
@media(max-width:99%)
Fiddle 2
Note:I suggest we keep 1 or 2 % spare(by applying 99%) because if we have applied padding some where within body that will create overflow to top level.
Also try adding zoom:1; under .table-responsive class that might help in case of iOS fiddle 3
if this does not work out please reply..