Скрытие колонок в HTML таблице: методы на CSS и JavaScript

Быстрый ответ

Ответ на ваш вопрос прост: используйте CSS для скрытия столбцов таблицы. Конкретно, примените display: none; к заголовочным ячейкам (<th>) и ячейкам данных (<td>). Вот основная идея:

.hide-column { display: none; }

После этого добавьте класс .hide-column к нужным элементам HTML:

<tr>
  <th>Видимый</th> <th class="hide-column">Скрытый</th>
</tr>
<tr>
  <td>Данные</td> <td class="hide-column">Не показывается</td>
</tr>

И вуаля, столбец исчез! Присвоение класса позволяет вам скрыть любой столбец.

Добавляем динамизм с помощью JavaScript

Если CSS вас не устраивает, применяйте JavaScript. Вот пример функции, которая управляет видимостью столбца:

function toggleColumnVisibility(columnIndex) {
  // Получаем столбцы таблицы
  var cols = document.querySelectorAll(`td:nth-child(${columnIndex}), th:nth-child(${columnIndex})`);
  cols.forEach(function (col) {
    // Теперь управляем видимостью
    col.style.display = col.style.display === 'none' ? '' : 'none';
  });
}

Для переключения видимости второго столбца вызовите toggleColumnVisibility(2);.

Управление пространством с помощью CSS

Чтобы сделать содержимое невидимым, сохраняя при этом занимаемое пространство, используйте visibility: hidden;:

.preserve-space-column { visibility: hidden; }

Столбец сохраняет свою площадь, но данные в нем становятся невидимыми.

Для тех, кто учитывает адаптивность

Медиа-запросы в CSS позволяют скрывать столбцы в зависимости от размера экрана устройства:

@media (max-width: 600px) {
  .responsive-hide { display: none; }
}

Класс .responsive-hide обеспечивает скрытие столбцов на устройствах с малыми размерами экрана.

Визуализация

Понимайте скрытие столбцов как игру в пикабу, но уже с блоками:

Таблица: 🧱🧱🧱🧱
Скрыть:   ^(2)

Мы ставим занавес (🎭):

До: [🧱, 🧱, 🧱, 🧱]
После:  [🧱, 🎭, 🧱, 🧱]

Столбец исчезает из визуальной сферы, однако остаётся в структуре.

Совместное использование jQuery и Bootstrap

Для упрощения использования jQuery может выполнить основную работу за вас:

// Скрываем второй столбец
$('td:nth-child(2), th:nth-child(2)').hide();

Воспользуйтесь классом .hidden-xs в Bootstrap, чтобы выполнить задачу:

<th class="hidden-xs">Возраст</th>
<td class="hidden-xs">29</td>

Столбец «Возраст» скроется на очень маленьких экранах.

Особые случаи: индивидуальные решения

Если требуется особый подход, есть несколько путей:

• Генерировать таблицы на сервере, отображая только необходимые столбцы.
• Использовать data-атрибуты для более универсального управления видимостью.

<td data-hide-on-mobile>29</td>

Data-атрибуты позволяют динамически или условно управлять видимостью элементов с помощью JavaScript.

Отладка и подготовка к будущему

При скрытии столбцов стоит быть внимательным к некоторым проблемам:

• Скрытие неправильных элементов: проверьте точность селекторов.
• Разрушение структуры: скрытые элементы могут нарушить расположение таблицы – проводите тестирование и корректировку.
• Нежелательные каскадные эффекты в CSS: определяйте селекторы точно, чтобы избежать непредвиденного воздействия.

Полезные материалы

1. Полное руководство по таблицам в CSS | CSS-Tricks
2. :nth-child() – каскадные таблицы стилей CSS | MDN
3. Как переключать видимость элемента | W3Schools
4. Методы подхода к макету способом Masonry в CSS | CSS-Tricks
5. Адаптивные таблицы данных: полная подборка решений | SitePoint
6. Свойство display в CSS | W3Schools
7. Адаптивный веб-дизайн: чем он является и как его использовать | Smashing Magazine