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

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

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

Download — Demo

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

Читайте також: Разработка сайта на WordPress: Полный план создания

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

}

Читайте також: Лицензионное ПО vs Пиратское ПО. Почему стоит выбирать легальное программное обеспечение

В моем варианте я вовсе скрываю хедер таблицы, названия, они мне не нужны. В архиве вы можете увидеть как их оставить, они прописываются через свойство 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%;}      
}

@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%;}

}

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

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

Добавить комментарий Отменить ответ