Скрытие определенных столбцов таблицы на мобильных устройствах в 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).

Объяснение

• 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):

• Чтобы скрыть столбец на экранах medium (md) и меньше:

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