We fix the problem with javascript.
1. You need to create normal table functioning on others browser.
2. Apply this solution below with cloning concept.
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
function iosTablesScroll(){
return true;
if(isMobile.iOS() && $('#table-wrapper').length){
//create same scroll
$("#table-wrapper").scroll(function(){
$(".table-header").scrollLeft($(this).scrollLeft());
});
if($(".table-header:visible").length){
$(".table-header").remove(); //reset before create
}
//create dummy table header
var iostable = '
';
$("#content").before(iostable);
$(".crypto-table thead").clone().appendTo('.table-header table');
$('#table-wrapper').removeClass('full-height'); //reset
//put same width td and th
t1 = $("#table-wrapper table th");
t2 = $("#table-wrapper table td");
if(t2.html() != 'No stock at the moment') {
t2.each(function (index) {
$(this).attr('width',t1.eq(index).attr('width'));
});
}
$("table").css('table-layout','fixed');
$(".table-header").show();
$(".crypto-table thead").hide();
}else{
$(".table-header").hide();
$(".crypto-table thead").show();
}
}