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

    Эпоха мобильных устройств диктует свои правила. Если раньше таблицы 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

    
    
    

    CSS

    
    table.table-2 {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
    }
    table.table-2 tr {
    	background-color: #f8f8f8;
    }
    table.table-2 th, table.table-2 td {
    	text-align: left;
        padding: 8px;
        border: 1px solid #ddd;
    }
    
    table.table-2 th{
    	font-weight: bold;
    }
    
    @media screen and (max-width: 600px) {
    	table.table-2 tr{
    		display: block;
    	}
    	table.table-2 tr{
    		margin-bottom: 30px;
    	}
    	table.table-2 th, table.table-2 td{
    		display: block;
    		text-align: center;
    	}
    }
    
    

    Результат:

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

    Способ № 3.

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

    Разметка HTML

    
    
    

    CSS

    
    table.table-3 {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
    }
    table.table-3 tr {
    		background-color: #f8f8f8;
    }
    
    table.table-3 th,
    table.table-3 td {
    		text-align: left;
    	 	padding: 8px;
    	border: 1px solid #ddd;
    }
    @media screen and (max-width: 600px) {
      	table.table-3 {
    		border: 0;
      	}
    
      
      
      	table.table-3 thead {
    	    border: none;
    	    clip: rect(0 0 0 0);
    	    height: 1px;
    	    margin: -1px;
    	    overflow: hidden;
    	    padding: 0;
    	    position: absolute;
    	    width: 1px;
      	}
      
      	table.table-3 tr {
        	border-bottom: 1px solid #ddd;
        	display: block;
       		margin-bottom: 30px;
      	}
      
    	table.table-3 td {
        	display: block;
        	text-align: right;
    	}
      
    	table.table-3 td::before {
    	    content: attr(data-label);
    	    float: left;
    	    font-weight: bold;
    	    text-transform: uppercase;
    	}
      
      	table.table-3 td:last-child {
        	border-bottom: 0;
      	}
    }
    
    

    Результат:

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

    Заключение

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

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


    Получайте полезную информацию
    на Вашу почту еженедельно

    Ваш Email не будет передан третьим лицам