Скрытие определенных столбцов таблицы на мобильных устройствах в 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, вы можете легко управлять видимостью столбцов таблицы на разных размерах экрана, обеспечивая адаптивность и удобство вашей таблицы на всех устройствах.
-
Создано 02.09.2024 08:03:37
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.