21
Мар
2017

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

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

 

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

Скачать: ResponsiveTables
Адаптивная таблица (пример)
Скачано: 1253, размер: 2.3 KB, дата: 16.Май.2017

 

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

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. На этом все, адаптивная таблица готова. Если у вас есть вопросы, всегда рад помочь.

Запись Адаптивная таблица (как сделать адаптивную таблицу Table на CSS — пример) впервые появилась Di-Grand блог о создании сайтов.

Источник: https://di-grand.com/blog/css/3624-adaptivnaya-tablitsa-kak-sdelat-adaptivnuyu-tablitsu-table-na-css.html

Share

Тебе может это понравится...