<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Адаптивная таблица для мобильных устройств

Адаптивная таблица для мобильных устройств

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

Однако появление горизонтальной полосы прокрутки на маленьких экранах мобильных устройств, приведет пользователя в бешенство. Неужели никак нельзя избежать полосы прокрутки? Можно! И я сейчас покажу вам, как это сделать.

HTML разметка

Для управления таблицей, мы обернули её в блок с классом container.

<div class="container">
  <table>
    <thead>
    <tr>
      <th>Название услуги</th>
      <th>Сайт</th>
      <th>Сроки</th>
      <th>Количество страниц</th>
      <th>Стоимость</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td data-label="Название услуги">Адаптация таблиц</td>
      <td data-label="Сайт">Лендинг</td>
      <td data-label="Сроки">5 дней</td>
      <td data-label="Количество страниц">1</td>
      <td data-label="Стоимость">1 000 руб</td>
    </tr>
    <tr>
      <td data-label="Название услуги">Адаптация таблиц</td>
      <td data-label="Сайт">Корпоративный сайт</td>
      <td data-label="Сроки">6 дней</td>
      <td data-label="Количество страниц">5</td>
      <td data-label="Стоимость">2 000 руб</td>
    </tr>
    <tr>
      <td data-label="Название услуги">Адаптация таблиц</td>
      <td data-label="Сайт">Интернет-магазин</td>
      <td data-label="Сроки">7 дней</td>
      <td data-label="Количество страниц">15</td>
      <td data-label="Стоимость">5 000 руб</td>
    </tr>
    </tbody>
  </table>
</div>

Атрибут data-label

Во всех ячейках таблицы добавлен атрибут data-label и в качестве передаваемого параметра - значения из шапки таблицы. В дальнейшем в каждую ячейку будут добавляться эти значения.

CSS правила


.container {
    min-width: 320px;
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}

table td, table th {
    padding: 10px;
    border: 1px solid #cbbdbd;
}

tr:nth-child(even){
    background-color: #f0f4c3
}

 Адаптивная таблица для мобильных устройств.

Адаптируем таблицу

При уменьшении размеров экрана, содержимое таблицы становится трудно различимым. В адаптивном режиме браузера, определяем контрольную точку, когда пора уже перестроить ячейки (флекс-элементы), в столбик (поменять направление главной оси).

@media (max-width: 720px) {
    // переопределяем CSS правила
}

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

.container table thead {
    display: none;
}

Преобразуем строчные ряды таблицы в блочные элементы. Теперь таблица имеет совсем другой вид – ячейки встали в столбик.

.container table tr {
    display: block;
}

Назначим ячейку флекс-контейнером, а данные ячеек раскидаем по правому и левому краю вдоль главной оси.

.container table td {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

При помощи псевдоэлемента before и функции attr(), подставим в каждую ячейку значение data-label.

.container table td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 20px;
}

 Адаптивная таблица для мобильных устройств.

Для просмотра, как работает адаптация таблицы, перейдите на CodePen и нажмите F12.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

master284 master284 30.09.2019 18:48:08

Очень востребованая возможность при вёрстке сайтов. Спасибо Михаилу!

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.