ПитерСайт » Блог » Адаптивная таблица

Адаптивная таблица

Пример:

HTML код:

<table>
	<tr>
		<th>1</th>
		<th>2</th>
		<th>3</th>
		<th>4</th>
		<th>5</th>
		<th>6</th>
		<th>7</th>
		<th>8</th>
		<th>9</th>
		<th>10</th>
		<th>11</th>
		<th>12</th>
		<th>13</th>
		<th>14</th>
		<th>15</th>
	</tr>
	<tr>
		<td>Данные_1</td>
		<td>Данные_2</td>
		<td>Данные_3</td>
		<td>Данные_4</td>
		<td>Данные_5</td>
		<td>Данные_6</td>
		<td>Данные_7</td>
		<td>Данные_8</td>
		<td>Данные_9</td>
		<td>Данные_10</td>
		<td>Данные_11</td>
		<td>Данные_12</td>
		<td>Данные_13</td>
		<td>Данные_14</td>
		<td>Данные_15</td>
	</tr>
</table>

CSS код:

table {display: block; overflow-x: auto;}

Адаптивная таблица

Это один из способов сделать HTML таблицу более удобной для просмотра на мобильных устройствах. Среди других в первую очередь стоит упомянуть два радикальных варианта:

1. Перестройка таблицы так, что она вытягивается по вертикали;
2. Просто не показывать таблицу, если ширина дисплея меньше некоторой величины - таблица скрывается, а взамен показывается уведомление с разъяснениями.

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

Способ, пример реализации которого представлен выше, впрочем, так же не лишен некоторых недостатков. Вообще говоря, небольшие размеры дисплеев мобильных устройств очень часто делают полностью удачные решения невозможными в принципе.

Более полная версия

CSS свойство display:block делает так, что таблица занимает по ширине только столько пространства, сколько ей нужно, чтобы вместить все данные. Если их немного для данной ширины экрана или родительского контейнера, то таблица не будет автоматически растягиваться на всю ширину доступного пространства. Даже если в CSS есть width:100%. Пример :

На данный момент только с помощью CSS исправить это нельзя. Чтобы заставить адаптивную таблицу занять все доступное пространство по ширине, потребуется использовать какой-нибудь скрипт и дополнительный CSS.

JavaScript / jQuery код:

jQuery(document).ready(function($) {
	function table_width() {
		var container_width = $('.container').width();
		$('.container > table').each(function(i) {
			if( $(this).find('tbody').width() < container_width ){
				$(this).addClass('full_width');
			} else {
				$(this).removeClass('full_width');
			}
		});
	}
	$(document).ready(table_width);
	$(window).on('resize',table_width);
});

Скрипт выясняет ширину контейнера, непосредственно в котором находится таблица или таблицы. Если ширина tbody меньше ширины контейнера, то тогда таблице или таблицам добавляется класс full_width. В иных случаях этот класс либо не добавляется, либо удаляется, если он уже был добавлен в результате работы данного скрипта. Функция запускается как при загрузке страницы, так и при изменении размера окна браузера.

CSS код:

.full_width {width: 100%; display: table;}

Класс full_width возвращает таблице свойство display:table, что в данном случае имеет решающее значение. Поскольку без него width:100% не сработало бы. А в результате их совместного действия таблица начинает заполнять все доступное пространство по ширине.

Поддержка в браузерах

• Windows: Google Chrome 1.0+, Firefox 3.5+, Internet Explorer 10.0+, Edge 12.0+, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+, Netscape 9.0
• Android: Samsung Internet 1.0+, Android Browser 4.4+, WebView Android 4.4+, Firefox for Android 4+, Chrome Android 18+, Opera Android 14+
• iOS: Safari on iOS 1.0+
• developer.mozilla.org/en-US/docs/Web/CSS/overflow-x#browser_compatibility
• caniuse.com/?search=overflow-x

Теги: CSS, TABLE

• Опубликовано: 23 Января, 2023
• Последнее редактирование: 4 Февраля, 2023