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

Чтобы вместить большую таблицу, достаточно обернуть её в <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

Комментарии 1

Infonetik Prime-Time Infonetik Prime-Time
21 октября 2020 в 16:09
0
Привет мастер! Совершенно случайно попал на эту страничку и обнаружил на ней скрипт моей мечты – очень давно хотел, чтобы таблица имела что-то позволяющее понять, что есть горизонтальная прокрутка таблицы. Попробовал применить ваш замечательный Код, однако столкнулся с проблемой. Если вся конструкция расположена непосредственно на странице со статьёй, то всё работает, но стоит вынести JS во внешний файл (на моём сайте много страниц с большими таблицами), перестаёт работать эффект тени. Как-то можно побороть эту неприятность?

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

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

Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
8897
0
В продолжении статей о рамках у ячеек таблицы, сделаем их появление по клику с помощью JQuery.
3185
+2
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
15242
+1
Пример горизонтального меню для лэндингов, в котором реализовано...
4523
+3
Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку...
3355
+1
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
7758
+10