Питерсайт       

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

Адаптивная таблица. Пример :

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

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%. Пример :

1 2 3
Данные_1 Данные_2 Данные_3

На данный момент только с помощью 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% не сработало бы. А в результате их совместного действия таблица начинает заполнять все доступное пространство по ширине.

Результат

1 2 3
Данные_1 Данные_2 Данные_3

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

  • Windows : Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ *
  • Linux : Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ *

* И во многих других браузерах с Gecko. Например, даже в таком весьма почтенном по возрасту, как Netscape 9.0.

Опубликовано: 10 Сентября, 2017

Последнее редактирование: 8 Октября, 2017

Яндекс.Директ Google AdWords Bing Ads Amazon Product AdsHTML CSS JavaScript jQuery PHP CMS CMF MODX Wordpress Drupal ExpressionEngine htaccess SEO SEMHTML CSS JavaScript jQuery PHP CMS CMF MODX Wordpress Drupal ExpressionEngine htaccess SEO SEMЯндекс.Директ Google AdWords Bing Ads Amazon Product Ads