Css адаптивная таблица: Адаптивная таблица на CSS стилях методом FlexBox

Leave a Comment / Адаптив / By /

Простая адаптивная таблица — dr.Brain

Адаптивные таблицы — оказывается мы нуждаемся в них гораздо чаще, чем думаем. Обычно, когда есть необходимость создать таблицу для адаптивного сайта, мы делаем собственную разметку или обращаемся к уже существующим сторонним библиотекам. Не нужно этого делать. Полагаю, что обычных HTML таблиц и несложных свойств CSS будет достаточно.

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

Прием 1

Горизонтальный скролл

Нужно признаться, что такое решение точно не претендует на Нобелевскую премию (оно, вообще, ни на что не претендует), но оно работает. Это верный выбор при выводе в таблицу больших объемов данных. Нужно просто установить фиксированное значение для свойства min-width элемента table и для просмотра данных на мобильном устройстве пользователю придется делать горизонтальный скролл.

table{
    min-width: 800px; /* устанавливаем желаемую минимальную ширину экрана */
}

Пример на codepen.io:

Этот метод прост в реализации. Пользователи мобильных устройств обычно не испытывают негативных эмоций при скролле, так как в данном случае это одно из наиболее часто воспроизводимых действий. Визуальная реализация на экране неполной или, иными словами, “обрезанной” таблицы дает четкое понимание дальнейших необходимых для просмотра контента действий со стороны пользователя.

Прием 2

Добавим гибкости

Если мы работаем с малыми наборами данных, будет полезен

flexbox. Давайте добавим позиционирование для элементов таблицы, выводимой на экран мобильного устройства (то есть при минимальной ширине экрана).

/* Ширина экрана до 800px будет относиться к мобильным устройствам*/
@media(max-width: 800px) {
        /* Скрываем заголовки таблицы*/
        table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0; /* объединяем границы ячеек */
        width: 50%;
    }
}

Пример на codepen. io:

А вот и проблемы, как результат такого решения:

  1. Мы визуально скрываем столбец с заголовками
    thead    , что в определенных случаях значительно затрудняет понимание содержимого таблицы,
  2. Макет такой таблицы не универсален и требует доработки, в зависимости от того, какие данные и в каком объеме представлены в таблице.

Манипуляции с заголовками носят сугубо индивидуальный харктер. Я могу предложить три варианта представления заголовков thead для мобильных устройств в таблице:

  1. заголовки можно скрыть,
  2. заголовки можно стилизовать, используя все тот же flexbox,
  3. заголовки можно перенести в span и поместить их в ячейки с данными.

Ниже приведены стили для вывода заголовков в дополнителыном элементе на мобильных устройствах:

/* Для настольных компьютеров скрываем span */
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}
/* Стили для мобильных устройств */
@media(max-width: 800px) {
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0;
        padding-top: 35px; /* дополнительный отступ, чтобы избежать наложения заголовка */
        position: relative;
        width: 50%;
    }
    /* Показываем span для мобильных устройств */
    table td span {
        display: block;
    }
}

Пример на codepen. io:

Зачем мне нужны таблицы?

Все очень просто: такой подход семантически верен.

Зачем использовать отвертку, когда нужен молоток. Конечно, вы можете сделать отвертку, похожую на молоток. Возможно, она даже будет работать почти как молоток. Но зачем все это? Просто возьми молоток и используй по назначению.

Спасибо за внимание.

Делаем адаптивную таблицу несколько примеров

Блог / Html + Css / Делаем адаптивную таблицу несколько примеров


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

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

Для создания такой адаптивной таблицы нам понадобиться только css. Html cструктура нашей таблицы должна выглядеть следующим образом:


<table>
    <thead>
        <tr>
            <td>head1</td>
	...
        </tr>
    </thead>	
    <tbody>
        <tr>
            <td>content1</td>
	...
        </tr>             
    </tbody>  
</table>

Теперь рассмотрим наши css свойства. Будем использовать медиа-запрос @media для создания правил для маленьких экранов.


@media only screen and (max-width: 760px) {…}

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


table { display: block;}
thead { display: block; float: left; }
tbody { display: block;}

 

Для отдельных ячеек таблицы зададим свойство td { display: block;}, чтобы расположить их друг под другом. А для строк тела таблицы добавим свойство tbody tr { display: inline-block; }

 

Чтобы наши столбцы не перескакивали вниз добавим для tbody свойство white-space: nowrap; , ну и чтобы можно было видеть не помещающиеся столбцы добавим нашему tbody скрол используя свойство overflow-x: auto;

У нас получился такой набор css свойств для адаптивной таблицы:


@media only screen and (max-width: 760px) {
    	table { display: block;  }
	thead { display: block; ; float: left; }
	tbody { display: block; white-space: nowrap; overflow-x: auto; }
    	td{display: block; }
	tbody tr { display: inline-block; }
}

Можно объединить свойства и чуть сократить код:


@media only screen and (max-width: 760px) {
    	table, thead, tbody, td { display: block;  }
	thead { float: left; }
	tbody { white-space: nowrap; overflow-x: auto; }
	tbody tr { display: inline-block; }
}

Ну и вот готовый пример адаптивной страницы с использованием css:

head1 head2 head3 head4 head5
content1 content2 content3 content4 content5
content1-2 content2-2 content3-2 content4-2 content5-2
content1-3 content2-3
content3-3		 content4-3 content5-3
content1-4 content2-4 content3-4 content4-4 content5-4

Ну и можете посмотреть готовый код этой таблицы:


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1. 0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    table{
        border: 2px solid black;
        border-collapse: collapse;
        width: 100%;
    }    
    thead{
        background: #333; 
        color: white;
        font-weight: bold;
    }
    table td{
       padding: 5px;
       border: 1px solid #c0c0c0; 
    }
    @media only screen and (max-width: 760px) {

	table { border-collapse: collapse; border-spacing: 0; border: none; }
 	td { margin: 0; vertical-align: top; }
	table { display: block; position: relative; }
	thead { display: block; float: left; }
	tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
	thead tr { display: block; }
	tbody tr { display: inline-block; vertical-align: top; }
	td { display: block; text-align: left; }
}
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>head1</td>
                <td>head2</td>
                <td>head3</td>
                <td>head4</td>
                <td>head5</td>
            </tr>
         </thead>
         <tbody>
                <tr>
                    <td>content1</td>
                    <td>content2</td>
                    <td>content3</td>
                    <td>content4</td>
                    <td>content5</td>
                </tr>
                <tr>
                    <td>content1-2</td>
                    <td>content2-2</td>
                    <td>content3-2</td>
                    <td>content4-2</td>
                    <td>content5-2</td>
                </tr>
                <tr>
                    <td>content1-3</td>
                    <td>content2-3</td>
                    <td>content3-3</td>
                    <td>content4-3</td>
                    <td>content5-3</td>
                </tr>
                <tr>
                    <td>content1-4</td>
                    <td>content2-4</td>
                    <td>content3-4</td>
                    <td>content4-4</td>
                    <td>content5-4</td>
                </tr>
         </tbody>  
    </table>
</body>
</html>

——————————————————————————

Если у вас появились вопросы, хотели бы записаться на урок, заказать статью(инструкцию) или приобрести видеоурок — пишите нам в: скайп: olegg. pann telegram, viber,whatsap — +380672998330 добавляйтесь на телеграмм-канал: t.me/webyk email: [email protected] мы в vk: vk.com/programing24 мы в fb: www.facebook.com/webprograming24 Обязательно оперативно ответим на все вопросы


Поделитесь в социальных сетях