Скрытие определенных столбцов таблицы на мобильных устройствах в 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>
Объяснение
Использование классов
Скрытие столбцов на разных точках останова
Если вы хотите скрыть столбец на разных точках останова, вы можете соответственно настроить классы:
<th class="d-none d-md-table-cell">Возраст</th>
<th class="d-md-none d-lg-table-cell">Возраст</th>
Таким образом, используя утилитные классы отображения Bootstrap, вы можете легко управлять видимостью столбцов таблицы на разных размерах экрана, обеспечивая адаптивность и удобство вашей таблицы на всех устройствах.