• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать адаптивную таблицу на flexbox (Таблица, что меняет расположение ячеек на разных размерах)
Сделать адаптивную таблицу на flexbox
Kosten
Дата: Вторник, 2019-12-10, 21:35 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26116
Награды: 60


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

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

Это универсальный материал, что отлично подойдет для любого объема текста.

При открытие на большом размере монитора:



Здесь уже наблюдаем с мобильного гаджет:



Установка:

HTML

Код
<table class="kolenudya-netablatsy">
    <thead>
        <tr>
            <th>Название команды 1</th>
            <th>Название команды 2</th>
            <th>Название команды 3</th>
            <th>Название команды 4</th>
  </tr>
    </thead>
    <tbody>
        <tr>
            <td><span>Название команды 1</span>Краткое описание 1</td>
            <td><span>Название команды 2</span>Краткое описание 1</td>
            <td><span>Название команды 3</span>Краткое описание 1</td>
            <td><span>Название команды 4</span>Краткое описание 1</td>
  </tr>
  <!-- Еще строки -->  
        <tr>
            <td><span>Название команды 1</span>Краткое описание 5</td>
            <td><span>Название команды 2</span>Краткое описание 5</td>
            <td><span>Название команды 3</span>Краткое описание 5</td>
            <td><span>Название команды 4</span>Краткое описание 5</td>
  </tr>
    </tbody>
</table>

CSS

Код
.kolenudya-netablatsy {
    border-radius: 5px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
}
.kolenudya-netablatsy th, .kolenudya-netablatsy td {
    padding: 10px 20px;
    font-size: 13px;
    border: none;
    font-family: Verdana, sans-serif;    
    border: 1px solid #266ba7;
    vertical-align: top;
}
.kolenudya-netablatsy th {
    color: #efefef;
    background: #205b8e;
    font-weight: bold;
    border: 1px solid #b9daf5;
    text-transform: uppercase;
    text-align: center;
}
.kolenudya-netablatsy tr:nth-child(even) {
    background: #deecf7;
}
.kolenudya-netablatsy td span {
    background: #337AB7;
    color: #f7f8f9;
    display: none;
    font-size: 11px;
    font-weight: bold;
    font-family: Verdana, sans-serif;    
    text-transform: uppercase;  
    padding: 5px 10px;
    position: absolute;
    top: 0;
    left: 0;    
}
@media(max-width: 768px) {
    .kolenudya-netablatsy thead {
  display: none;
    }
    .kolenudya-netablatsy tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 30px;
    }
    .kolenudya-netablatsy td {
        margin: 0 -1px -1px 0;
        padding-top: 35px;
        position: relative;
        width: 50%;
    }
    .kolenudya-netablatsy td span {
        display: block;
    }
}
@media(max-width: 480px) {
    .kolenudya-netablatsy td {
        width: 100%;
    }
}

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

Демонстрация
Прикрепления: 9677737.png(6.3 Kb) · 1659448.png(6.7 Kb) · nfudsan.zip(3.1 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2019-12-12, 16:11 | Сообщение 2
Оффлайн
Администраторы
Сообщений:26116
Награды: 60



See the Pen
Flexbox Dice
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать адаптивную таблицу на flexbox (Таблица, что меняет расположение ячеек на разных размерах)
  • Страница 1 из 1
  • 1
Поиск: