Скрытие определенных столбцов таблицы на мобильных устройствах в Bootstrap 5

Скрытие определенных столбцов таблицы на мобильных устройствах в Bootstrap 5

Скрытие определенных столбцов таблицы на мобильных устройствах в Bootstrap 5

Чтобы скрыть определенные столбцы таблицы на устройствах c небольшим размером экрана с помощью Bootstrap 5, можно использовать утилитные классы отображения, предоставляемые Bootstrap. Эти классы позволяют управлять видимостью элементов в зависимости от размера экрана (например, d-none, d-sm-block, d-md-block, d-lg-block и т.д.).

Пошаговая инструкция

Определите столбцы для скрытия: Решите, какие столбцы вы хотите скрыть на малых устройствах.

Примените утилитные классы Bootstrap: Используйте классы отображения Bootstrap (d-none, d-sm-block и т.д.) для управления видимостью столбцов таблицы на разных размерах экрана.

Пример

Допустим, у вас есть таблица с тремя столбцами, и вы хотите скрыть второй столбец (Возраст) на экранах меньше, чем md (т.е. меньше 768px).

<table class="table">

  <thead>

    <tr>

      <th>Имя</th>

      <th class="d-none d-md-table-cell">Возраст</th> <!-- Этот столбец будет скрыт на малых устройствах -->

      <th>Год рождения</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Иван Иванов</td>

      <td class="d-none d-md-table-cell">28</td> <!-- Этот столбец будет скрыт на малых устройствах -->

      <td>1990</td>

    </tr>

    <tr>

      <td>Мария Смирнова</td>

      <td class="d-none d-md-table-cell">32</td> <!-- Этот столбец будет скрыт на малых устройствах -->

      <td>1991</td>

    </tr>

  </tbody>

</table>

Объяснение

  • d-none: Этот класс скрывает элемент на всех размерах экрана.
  • d-md-table-cell Этот класс делает элемент видимым как ячейку таблицы, начиная с точки останова md (medium), которая составляет 768px и выше в Bootstrap 5.
  • Использование классов

  • d-none: Скрывает элемент на всех размерах экрана.
  • d-sm-: Применяет стили на экранах ≥576px.
  • d-md-: Применяет стили на экранах ≥768px.
  • d-lg-: Применяет стили на экранах ≥992px.
  • d-xl-: Применяет стили на экранах ≥1200px.
  • d-xxl-: Применяет стили на экранах ≥1400px.
  • Скрытие столбцов на разных точках останова

    Если вы хотите скрыть столбец на разных точках останова, вы можете соответственно настроить классы:

  • Чтобы скрыть столбец на экранах extra small (xs) и small (sm):
  • <th class="d-none d-md-table-cell">Возраст</th>

  • Чтобы скрыть столбец на экранах medium (md) и меньше:
  • <th class="d-md-none d-lg-table-cell">Возраст</th>

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

    Источник

    НЕТ КОММЕНТАРИЕВ

    Оставить комментарий