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

Чтобы вместить большую таблицу, достаточно обернуть её в <div> и добавить несколько CSS стилей, чтобы появился горизонтальный скролл.

<div class="big-table">
	<table>
		...
	</table>
</div>
HTML
.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;
}
CSS

Результат:

Данный приём можно упростить обернув таблицы дивом автоматом, с помощью JQuery.

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

Обычно на мобильных скролбар скрыт и не совсем понятно что есть возможность прокрутить таблицу. Более лучший вариант можно сделать добавлением теней по бокам таблицы.

<table>
	...
</table>
HTML
.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%;
}
CSS

JQuery:

$(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');
			}
		}
	});
});
JS

Результат:

17.01.2020

Комментарии

, чтобы добавить комментарий.

Другие публикации

Перебор ячеек таблицы jQuery
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
03.04.2019
6146
+1
Выделение ячеек таблицы по клику
В продолжении статей о рамках у ячеек таблицы, сделаем их появление по клику с помощью JQuery.
10.09.2019
1625
+2
Фиксированная шапка таблицы при прокрутке
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
03.12.2016
12454
+1
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
19.12.2018
3184
+2
Отметить или снять все чекбоксы в таблице
Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку...
11.12.2016
2392
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
3465
+6