Css адаптивная таблица – Делаем адаптивный HTML, добавляя одну строку в CSS / Edison corporate blog / Habr

Адаптивная таблица. Несколько способов реализации.

Эпоха мобильных устройств диктует свои правила. Если раньше таблицы html, как правило видели пользователи персональных компьютеров, то сейчас, в первую очередь, нужно позаботиться о том, чтобы эти таблицы отображались корректно и на смартфонах и планшетах.

В этой статье реализуем несколько способов сделать адаптивную таблицу.

Способ № 1.

Данный способ предполагает использование обертки для таблицы. Задав свойство overflow-x:auto контейнеру-обертке, мы получим нужный результат: если таблица не будет помещаться на экран, то появится горизонтальный скроллинг.

Разметка HTML




CSS



.table-wrap{
	overflow-x:auto;
}	
table.table-1 {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table.table-1 tr {
	background-color: #f8f8f8;
}
table.table-1 th, table.table-1 td {
	text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}

table.table-1 th{
	font-weight: bold;
}

Результат:

Фамилия Имя Отчество Дата рождения Пол Страна Паспорт Телефон
Иванов Иван Иванович 18.08.1995 Мужской Россия 589047 12345678
Джонн Смитт Олегович 18.08.1980 Мужской Англия 789047 81324567
Ковалева Екатерина Дмитриевна 18.08.19680 Женский Казахстан 289047 12357458

Способ № 2.

Следующий способ адаптировать таблицу под мобильные устройства тоже довольно простой. Здесь нам нужно всего лишь перевести элементы td, th в блоки. Напомним, что по умолчанию свойство display для этих элементов равно table-cell.

Разметка HTML

Третий способ является наиболее элегантным решением. Единственное неудобство в том, что нам придется дублировать в html заголовки th в каждой ячейке td.

Разумеется существуют и другие методы сделать адаптивную таблицу, в том числе и с применением плагинов jQuery или на чистом JavaScript. Можно также воспользоваться решениями, которые предлагают такие фреймворки как Bootstrap.

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

Как сделать таблицы адаптивными с CSS

Как сделать таблицы адаптивными с CSS

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

Моя недавняя статья на HackerNews Пишите HTML, как будто сейчас 1999 год, получила намного больше внимания, чем я ожидал. Последовало несколько комментариев, в которых говорилось о том, что элементы table не очень хорошо работают с мобильными устройствами или о невозможности использования удобного макета на небольших экранах. Это просто неправда.

Ниже приведены две отдельные демо-версии, показывающие, как оптимизировать HTML table для мобильных устройств, используя только минимальное количество CSS. Эти реализации могут быть неидеальными, но они намного лучше реализации множества пользовательских элементов div в виде таблиц.

Демо 1: Просто позвольте им прокручиваться

Хорошо, я признаю, что эта реализация не самая лучшая, но я считаю, что она хорошо работает с огромными наборами данных. Просто установите min-width для родительского элемента table, и браузер просто потребует от пользователя прокручивать содержимое по горизонтали.

Как сделать таблицы адаптивными с CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

table { min-width: 800px; /* Установите здесь нужный min-width */ }

table {

    min-width: 800px; /* Установите здесь нужный min-width */

}

Посмотрите CodePen ниже, чтобы увидеть ее в действии:

Я на самом деле предпочитаю этот метод из-за его простоты и функциональности. Пользователи на мобильных устройствах знакомы с прокруткой, поскольку это одно из основных необходимых действий. «Обрезка» таблицы дает им мгновенный визуальный сигнал, что они могут прокручивать контент.

Демо 2: Более гибкая, чем вы думаете

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

/* Используем 800px для мобильного экрана */ @media(max-width: 800px) { /* Скрываем заголовки таблицы */ table thead { left: -9999px; position: absolute; visibility: hidden; } table tr { border-bottom: 0; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 40px; } table td { border: 1px solid; margin: 0 -1px -1px 0; /* Удаляем двойную границу */ width: 50%; } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/* Используем 800px для мобильного экрана */

@media(max-width: 800px) {

    /* Скрываем заголовки таблицы */

    table thead {

        left: -9999px;

        position: absolute;

        visibility: hidden;

    }

    table tr {

        border-bottom: 0;

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        margin-bottom: 40px;

    }

    table td {

        border: 1px solid;

        margin: 0 -1px -1px 0; /* Удаляем двойную границу */

        width: 50%;

    }

}

Посмотрите демонстрацию на CodePen:

Как сделать таблицы адаптивными с CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Есть некоторые предостережения, относящиеся к этому подходу:

В настоящее время мы скрываем строку thead в мобильном представлении (только визуально — программы чтения с экрана все еще могут сканировать ее)

Может потребоваться дополнительная работа в зависимости от того, сколько элементов в строке flexbox имеет смысл размещать (на основе проекта и набора данных)

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

/* Стили span по умолчанию - скрыты на настольных устройствах */ table td span { background: #eee; color: dimgrey; display: none; font-size: 10px; font-weight: bold; padding: 5px; position: absolute; text-transform: uppercase; top: 0; left: 0; } /* Простой CSS для flexbox-таблиц на мобильных устройствах */ @media(max-width: 800px) { table thead { left: -9999px; position: absolute; visibility: hidden; } table tr { border-bottom: 0; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 40px; } table td { border: 1px solid; margin: 0 -1px -1px 0; padding-top: 35px; /* дополнительный отступ для предотвращения склеивания заголовков */ position: relative; width: 50%; } /* Отображение span заголовков */ table td span { display: block; } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

/* Стили span по умолчанию - скрыты на настольных устройствах */

table td span {

    background: #eee;

    color: dimgrey;

    display: none;

    font-size: 10px;

    font-weight: bold;

    padding: 5px;

    position: absolute;

    text-transform: uppercase;

    top: 0;

    left: 0;

}

 

/* Простой CSS для flexbox-таблиц на мобильных устройствах */

@media(max-width: 800px) {

    table thead {

        left: -9999px;

        position: absolute;

        visibility: hidden;

    }

    table tr {

        border-bottom: 0;

        display: flex;

        flex-direction: row;

        flex-wrap: wrap;

        margin-bottom: 40px;

    }

    table td {

        border: 1px solid;

        margin: 0 -1px -1px 0;

        padding-top: 35px; /* дополнительный отступ для предотвращения склеивания заголовков */

        position: relative;

        width: 50%;

    }

    /* Отображение span заголовков */

    table td span {

        display: block;

    }

}

Обновление: как указал пользователь mmoez, гораздо чище будет использовать псевдо-селекторы :nth-child для реализации полей заголовков на мобильных устройствах.

Почему я должен обращать внимание на использование элементов table?

Если в двух словах: доступность и правильная семантика. Зачем использовать отвертку, когда вам нужен молоток? Конечно, вы можете заставить эту отвертку выглядеть и работать почти так же, как молоток, но с какой целью? Просто используйте молоток. Получайте удовольствие, делая свои таблицы адаптивными!

Автор: Bradley Taunt

Источник: https://bradleytaunt.com

Редакция: Команда webformyself.

Как сделать таблицы адаптивными с CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Как сделать таблицы адаптивными с CSS

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Адаптивная таблица CSS | {dev-tricks}

В мой список раздражающих меня вещей в веб-дизайне входят таблицы, часто не оптимизированые для устройств меньше компьютера. Допустим, я открыл Википедию на  iPhone и  просматриваю список эпизодов  из  «Звёздный путь: Следующее поколение» (я вырос в конце 80 — х), в таблице много данных, и состоит она из множества столбцов. Заканчивается это дело множеством тыканий пальцем в экран , переворачиванием устройства, и раздражением.

Это проблема широко распространена в вэбе несмотря на то, что есть  несколько вариантов отзывчивых таблиц, в том числе такой просто с помощью CSS:

Так в чем же препятствие для использования этого или другого шаблона? Нужно много времени? Или усилий? Давайте быстро пробежимся по этой теме.

 

С чего начать?

Мы создадим такую же таблицу на обычном HTML как выше в примере:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<table>

  <caption>Statement Summary</caption>

  <thead>

    <tr>

      <th scope=«col»>Account</th>

      <th scope=«col»>Due Date</th>

      <th scope=«col»>Amount</th>

      <th scope=«col»>Period</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Visa — 3412</td>

      <td>04/01/2016</td>

      <td>$1,190</td>

      <td>03/01/2016 — 03/31/2016</td>

    </tr>

  </tbody>

</table>

 

Наша Таблица состоит из четырех столбцов. Давайте добавим немного  CSS  стилей:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

table {

  border: 1px solid #ccc;

  border-collapse: collapse;

  margin: 0;

  padding: 0;

  table-layout: fixed;

  width: 100%;

}

table tr {

  background: #f8f8f8;

  border: 1px solid #ddd;

  padding: .35em;

}

table th,

table td {

  padding: .625em;

  text-align: center;

}

Это  похоже на многие HTML-таблицы, с которыми вы работали ранее. И, наверное, сейчас вы думаете, так как же мне сделать таблицу резиновой?

 

Сделаем таблицу адаптивной

Сначала, добавим атрибут  aria-label  для каждой ячейки данных с именем столбца.  Которые будут использоваться в качестве маркировки в отзывчивом макете. Использование aria-label  также обеспечивает поддержку  для чтения с экрана.

 

<td aria-label=«Account»>Visa — 3412</td>

<td aria-label=«Due Date»>04/01/2016</td>

<td aria-label=«Amount»>$1,190</td>

<td aria-label=«Period»>03/01/2016 — 03/31/2016</td>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

@media screen and (max—width: 600px) {

  table thead {

    display: none;

  }

  table tr {

    border—bottom: 3px solid #ddd;

    display: block;

  }

  table td {

    border—bottom: 1px solid #ddd;

    display: block;

    text—align: right;

  }

  table td:before {

    content: attr(aria—label);

    float: left;

  }

}

 

 

В маленькой области видимости  <tr>  и  <tr>  элементы будут отображаться на блочном уровне, а не как табличные строки и ячейки. А псевдоэлемент :before теперь служит в качестве label.

Вот наша таблица (Попробуйте сузить экран вашего устройства).

 

See the Pen qargXL by Ruslan (@rkaliev) on CodePen.0

И это все?  😳

Да, в общем то. По крайней мере для этого примера точно все. Имейте в виду, что это только один резиновый макет таблицы с относительно простым содержанием данных. Вы можете использовать различные варианты и управлять более сложными данными, поэтому ваш результат может отличаться. Но всегда принимайте во внимание варианты для лучшего опыта взаимодействия (UX).

Источник: allthingssmitty.com

Как сделать таблицу адаптивной

Вы здесь: Главная - CSS - CSS3 - Как сделать таблицу адаптивной

Как сделать таблицу адаптивной

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

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

Демонстрация адаптивной таблицы.

HTML разметка

<div>
<table>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
<th>Баллы</th>
</tr>
<tr>
<td>Юлия</td>
<td>Смирнова</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Эвелин</td>
<td>Яковлева</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Андрей</td>
<td>Петров</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>

Мы создали простенькую HTML таблицу, пока она помещается на экране, все OK. При уменьшении ширины экрана, таблица будет срезаться и мы не увидим её данных или она станет очень мелкой и мы опять ничего не увидим.

Как сделать таблицу адаптивной.

Вы наверное заметили, что я поместил таблицу внутри тега div и очевидно не просто так. Сам по себе тег div ничего не даёт, пока мы не пропишем ему стили.

CSS стили

Задав всего одно свойство, таблица адаптируется, автоматически появится горизонтальная полоса прокрутки, когда содержимое внутри тега div перестанет влезать в текущую ширину экрана по оси X.

div (
  overflow-x: auto;
)

Стилизуем остальные теги таблицы:

table {
  border-collapse: collapse; /* Отображать только одинарные линии */
  border-spacing: 0; /* Расстояние между ячейками */
  width: 100%;
  border: 1px solid #afb42b;
  color: #212121;
}

th, td {
  text-align: left;
  padding: 8px;
}

Стилизация тега tr (ряд) заслуживает отдельного комментария. Уже стало нормой, когда табличные ряды имеют полосатый вид (зебра). Для этого используется псевдокласс :nth-child со значение в скобочках even. Значение even, всем четным элементам присваивает свойства, в нашем случае – это цвет фона. Таким образом, таблица будет полосатой.

tr:nth-child(even){
  background-color: #f0f4c3
}

Как сделать таблицу адаптивной.

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

  • Как сделать таблицу адаптивной. Создано 26.10.2018 10:00:26
  • Как сделать таблицу адаптивной. Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Адаптивная таблица (как сделать адаптивную таблицу Table на CSS

Каждый верстальщик рано или поздно сталкивается с вопросом адаптации таблиц под планшеты и мобильные устройства. На сам деле это действительно проблема, табличная верстка не предназначена для таких целей. Во времена когда ее часто использовали, ни кто и предположить не мог что технологии адаптации шагнут так далеко. Но отказаться на все 100% от табличной верстки мы не можем. Она до сих пор встречается на сайтах, в интернет магазинах. Обычно это списки заказов, либо характеристики товаров. Почему так? Потому что такие таблички не просто сверстать дивами (div) и зациклить т.к. функционал движков будет выводить эти характеристики в цикле. Но тогда возникает вопрос, как же сделать адаптивную таблицу? Да еще что бы не дописывать в нее классы, для всех таблиц? Есть решение. И так, приступим.

 

Для начала вы можете скачать и взглянуть как работает адаптивная таблица.

 

Долго и нудно объяснять не вижу смысла. По сути все что вам нужно сделать, это дописать стили:

table {text-align: center;} @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none!important; width: 100%!important; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

table {text-align: center;}

 

@media

only screen and (max-width: 760px),

(min-device-width: 768px) and (max-device-width: 1024px)  {

 

/* Force table to not be like tables anymore */

table, thead, tbody, th, td, tr {

display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

tr { border: 1px solid #ccc; }

td {

/* Behave  like a "row" */

border: none!important;

        width: 100%!important;

position: relative;

padding-left: 50%;

}

td:before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

top: 6px;

left: 6px;

width: 45%;

padding-right: 10px;

white-space: nowrap;

}

/*

Label the data

*/

 

}

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

Как легко адаптировать HTML-таблицу под мобильные устройства?

На сегодняшний день HTML-таблицы утратили свою популярность в верстке элементов дизайна и были заменены блоками (header, menu, div, footer и др.), но они до сих пор применяются в области структуризации и представлении данных пользователям.

Часто, вставленная таблица в тело документа, не адаптирована под мобильные устройства, если это не было определено заранее в правилах CSS. Получается, что адаптивная верстка будет подстраиваться под границы экрана, а таблица может только сжиматься, оставляя некоторую область за пределами дисплея.

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

Создадим таблицу с перечислением некоторых цветов каталога Pantone в каждой из 6-и ячеек.

PANTONE 224PANTONE 225PANTONE 226PANTONE 227PANTONE 228PANTONE 229

HTML-код:

<table>
<tbody>
<tr>
<td>PANTONE 224</td>
<td>PANTONE 225</td>
<td>PANTONE 226</td>
<td>PANTONE 227</td>
<td>PANTONE 228</td>
<td>PANTONE 229</td>
</tr>
</tbody>
</table>

CSS-код:

table.pantone {width: 100%; border-collapse: collapse;}
table.pantone td {padding: 0.6rem 1rem; color: #ffffff; font-weight: bold;}

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

HTML-таблица с красками Pantone

А теперь вид таблицы с уменьшенным разрешением экрана, которое используется в мобильных устройствах.

Режим адаптивного дизайна

Видим, что вся информация, представленная в таблице, не входит в область экрана. Добавим к ячейкам правило CSS:

@media screen and (max-width: 800px) {
  table.pantone td {display: block;}
}

Это значит, что при разрешении экрана менее 800 пикс., ячейки таблицы станут блоками, выстраиваясь сверху вниз.

HTML-таблица адаптивная под мобильные устройства

Таким образом, мы рассмотрели, как легко привести табличный формат к адаптивному дизайну.