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

Я создал таблицу в ASPX. Я хочу скрыть один из Столбцов на основе требования, но нет такого атрибута, как visible в здании таблицы HTML. Как я могу решить свою проблему?

8 ответов


для этого необходимо использовать таблицу стилей.

<td style="display:none;">

можно использовать 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;">

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


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

#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 класс on <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 в определенном индексе, чтобы иметь этот стиль.