Как скрыть столбцы в таблице HTML?

можно использовать nth-child селектор CSS, чтобы скрыть весь столбец:

#myTable tr > *:nth-child(2) {
    display: none;
}

это работает в предположении, что ячейка столбца N (будь то th или td) всегда является N-М дочерним элементом его строки.

вот демо.

---

​ Если вы хотите, чтобы номер столбца был динамическим, вы можете сделать это с помощью querySelectorAll или любой фреймворк, представляющий подобную функциональность, например jQuery здесь:

$('#myTable tr > *:nth-child(2)').hide();

демо с помощью jQuery

(решение jQuery также работает на устаревшие браузеры, которые не поддерживают nth-child).

вы также можете использовать:

<td style="visibility:hidden;">
or
<td style="visibility:collapse;">

разница между ними в том, что "скрытый" скрывает ячейку, но она удерживает пространство, но с "коллапсом" пространство не удерживается, как display:none. Это важно при скрытии целого столбца или строки.

ответ коса почти прав, но может иметь вредные побочные эффекты. Это более правильно:

#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
    display: none;
}

CSS (Каскадные Таблицы Стилей) будет каскад атрибуты для всех своих детей. Это значит, что *:nth-child(1) скроет первый td каждого trи скрыть первый элемент всех td дети. Если кто-то из ваших td есть такие вещи, как кнопки, значки, входы или выбирает, первый будет скрыт (гав!).

даже если вы не в настоящее время есть вещи, которые будут скрыты, изображение вашего разочарования вниз по дороге, если вам нужно добавить один. Не наказывайте себя в будущем так, это будет боль для отладки!

мой ответ скроет только первый td и th на все tr на #myTable сохраняя ваши другие элементы в безопасности.

Bootstrap люди используют .hidden класс <td>.

вы также можете скрыть столбец с помощью элемента colhttps://developer.mozilla.org/en/docs/Web/HTML/Element/col

чтобы скрыть второй столбец в таблице:

<table>
  <col />
  <col style="visibility:collapse"/>
  <tr><td>visible</td><td>hidden</td></tr>
  <tr><td>visible</td><td>hidden</td></tr>

известные проблемы: это не будет работать в Google Chrome. Пожалуйста, проголосуйте за ошибку на https://bugs.chromium.org/p/chromium/issues/detail?id=174167

<style>
.hideFullColumn tr > .hidecol
{
    display:none;
}
</style>

использовать .hideFullColumn в таблице И.hidecol в th.Вам не нужно добавлять класс в td индивидуально, так как это будет проблемой, потому что индекс может не иметь в виду каждый td.

вы также можете делать то, что предлагает vs dev программно, назначая стиль с помощью Javascript, повторяя столбцы и устанавливая элемент td в определенном индексе, чтобы иметь этот стиль.