Как вместить большие таблицы на страницы сайта

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

.big-table {
	overflow: auto;
	position: relative;
}
.big-table table {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

$(function(){
	$('table').wrap('<div class="big-table"></div>');
});

<table>
	...
</table>

.big-table {
	overflow: auto;
	position: relative;
}
.big-table table {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
.scroll-right:after {
	content: '';
	display: block;
	width: 15px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 500;
	background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: 15px 100%;
	background-position: 100% 0%;
}
.scroll-left:before {
	content: '';
	display: block;
	width: 15px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 500;
	background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: 15px 100%;
}

$(function(){
	$('table').wrap('<div class="big-table"></div>');

	function resize_table_box() {
		$('.big-table').each(function(){
			var box_width = $(this).outerWidth();
			var table_width = $(this).children('table').prop('scrollWidth');
			$(this).removeClass('scroll-left');
			if (table_width > box_width) {
				$(this).addClass('scroll-right');
			} else {
				$(this).removeClass('scroll-right');
			}
		});		
	}

	resize_table_box();
	$( window ).on('resize', function() {
		resize_table_box();
	});

	$('.big-table table').on('scroll', function() {
		var parent = $(this).parent();
		if ($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
			if (parent.hasClass('scroll-right') ){
				parent.removeClass('scroll-right');
			}
		} else if ($(this).scrollLeft() === 0){
			if (parent.hasClass('scroll-left')){
				parent.removeClass('scroll-left');
			}
		} else {
			if(!parent.hasClass('scroll-right')){
				parent.addClass('scroll-right');
			}
			if(!parent.hasClass('scroll-left')){
				parent.addClass('scroll-left');
			}
		}
	});
});