Март

Адаптивная таблица на CSS и HTML без Bootstrap

Верстка адаптивной таблицы на чистом CSS и HTML.

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

Для начала сверстаем простую таблицу HTML с небольшим количеством ячеек.

Код HTML:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table id='adap-table'>
<thead>
<tr>
<th>Устройство</th>
<th>Цена</th>
<th>Время</th>
<th>Гарантия</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Устройство" class="active">Apple</td>
<td data-label="Цена">10 000</td>
<td data-label="Время">2 часа</td>
<td data-label="Гарантия">1 год</td>
</tr>
<tr>
<td data-label="Устройство">LG</td>
<td data-label="Цена">5 000</td>
<td data-label="Время">1 час</td>
<td data-label="Гарантия">1 год</td>
</tr>
<tr>
<td data-label="Устройство">SONY</td>
<td data-label="Цена">5 000</td>
<td data-label="Время">1 час</td>
<td data-label="Гарантия">1 год</td>
</tr>
</tbody>
</table>
<body>
</html>

Как видите к каждой td со значением я добавил data-label с названием соответствующего столбца, чтобы потом его использовать.

Код CSS:


#adap-table {
border: 1px solid #ccc;
width: 100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}
#adap-table tr {
border: 1px solid #ddd;
padding: 5px;
}
#adap-table th, #adap-table td {
padding: 10px;
text-align: center;
}
#adap-table th {
text-transform: uppercase;
font-size: 14px;
}
#adap-table thead tr:first-child{
background-color:#ccc;
}
@media screen and (max-width: 767px) {
#adap-table tbody tr td:first-child{
background-color:#ccc;
}
#adap-table tbody tr td{
display:none;
}
#adap-table tbody tr td:first-child{
display:block;
}
#adap-table tbody tr:first-child td{
display:block;
}
#adap-table {
border: 0;
}
#adap-table thead {
display: none;
}
#adap-table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
#adap-table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
#adap-table td:last-child {
border-bottom: 0;
}
#adap-table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
@media screen and (min-width: 768px) {
#adap-table tbody tr td{
display:table-cell!important;
}
}

Далее при помощи content я добавляя в значение ячейки название столбца при помощи псевдо-элемента before, предварительно скрыв шапку таблицы.

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

Код jQuery:


$('#adap-table tbody tr td:first-child').click(function(){

if($(this).hasClass('active')){
$(this).siblings().css('display','none');
$(this).removeClass('active');

}
else{
$(this).siblings().css('display','block');
$(this).addClass('active');
}
});

Не забудьте кстати подключить библиотеку jQuery сперва.

Пример на CodeOpen с jQuery.

Читайте также: