Адаптивная HTML таблица. Вариант 1

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

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>
	</tr>
	<tr>
		<td>Table_data_1</td>
		<td>Table_data_2</td>
		<td>Table_data_3</td>
		<td>Table_data_4</td>
		<td>Table_data_5</td>
		<td>Table_data_6</td>
		<td>Table_data_7</td>
		<td>Table_data_8</td>
		<td>Table_data_9</td>
		<td>Table_data_10</td>
	</tr>
</table>

CSS код:

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

Если таблица по ширине меньше, чем ее контейнер

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

Чтобы заставить таблицу всё-таки занять всё доступное пространство по ширине, требуется использование JavaScript + дополнительный CSS:

JavaScript / jQuery код:

jQuery(document).ready(function($) {
	function tableWidth() {
		var containerWidth = $('.example2').width();
		$('.example2 > table').each(function(i){
			if($(this).find('tbody').width() < containerWidth){
				$(this).addClass('full-width');
			}else{
				$(this).removeClass('full-width');
			}
		});
	}
	$(document).ready(tableWidth);
	$(window).on('resize',tableWidth);
});

Скрипт выясняет ширину контейнера, в котором находится таблица или таблицы. Если ширина tbody таблицы оказывается меньше ширины контейнера, тогда таблице или таблицам добавляется класс full-width. Если ширина tbody таблицы больше или равна ширине контейнера, тогда данный класс либо не добавляется, либо удаляется, если он уже был добавлен.

CSS код:

.full-width {width: 100%; display: table;}

Класс full-width возвращает таблице свойство display:table. Это свойство делает так, что width:100% срабатывает и заставляет таблицу занять всё доступное пространство по ширине.

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

Windows

Internet Explorer 10.0+

Firefox 1.5+

Google Chrome

Opera 9.5+

Safari 3.1+

SeaMonkey 1.0+

Netscape 9.0

Linux

Firefox 1.5+

Google Chrome / Chromium

Opera 9.5+

SeaMonkey 1.0+

Netscape 9.0

Ещё

• Mobile-friendly HTML table. Variant 2