Адаптивна таблиця (як зробити адаптивну таблицю Table на CSS - приклад)

Кожен верстальник рано чи пізно стикається з питанням адаптації таблиць під планшети та мобільні пристрої. Насправді це справді проблема, таблична верстка не призначена для таких цілей. У часи коли її часто використовували, ні хто й припустити не міг, що технології адаптації крокують так далеко. Але відмовитись на всі 100% від табличної верстки ми не можемо. Вона й досі зустрічається на сайтах, в інтернет магазинах. Зазвичай це списки замовлень, чи характеристики товарів. Чому так? Тому що такі таблички не просто скинути дивами (div) і зациклити т.к. Функціонал двигунів буде виводити ці параметри в циклі. Але тоді виникає питання, як зробити адаптивну таблицю? Та ще що б не дописувати до неї класи, для всіх таблиць? Є рішення. І так, приступимо.

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

Download – Demo

Довго та нудно пояснювати не бачу сенсу. По суті все, що вам потрібно зробити, це дописати стилі:

Читайте також: Розробка сайту: ключові етапи та рекомендації

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
	*/

}

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. На цьому все адаптивна таблиця готова. Якщо у вас є питання, завжди радий допомогти.

2. Спосіб стилізації таблиць для телефону – поява горизонтального скрола, прокручування.

Додайте у ваш css файл наступний код

@media only screen and (max-width: 767px){
  /* Tables */
  table {margin: auto;border-collapse: collapse;overflow-x: auto;display: block;width: fit-content;max-width: 100%;}      
}ta

@media only screen and (max-width: 767px){

/* Tables */

table {margin: auto;border-collapse: collapse;overflow-x: auto;display: block;width: fit-content;max-width: 100%;}

}ta

Олег

Отличное решение

Відповіcти

Ярослав

Красавчик, не совсем кроссбраузерно и не все версии поддерживают, но очень классное решение, я бы не догадался)

Юлия

Приветствую.
А как сделать, чтобы хедер таблицы не скрывался совсем? У меня таблица с размерами и без хедера никак.
тут вот пример на тестовом.
Очень буду благодарна за помощь!!! Заранее спасибо

Digrand

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

Адаптивна таблиця (як зробити адаптивну таблицю Table на CSS – приклад)

2. Спосіб стилізації таблиць для телефону – поява горизонтального скрола, прокручування.

Залишити відповідь Скасувати коментар