Как скрыть столбцы в таблице HTML?
Я создал таблицу в ASPX. Я хочу скрыть один из Столбцов на основе требования, но нет такого атрибута, как visible
в здании таблицы HTML. Как я могу решить свою проблему?
8 ответов
можно использовать nth-child
селектор CSS, чтобы скрыть весь столбец:
#myTable tr > *:nth-child(2) {
display: none;
}
это работает при предположении, что ячейка столбца N (будь то th
или td
) всегда является N-М дочерним элементом его строки.
Если вы хотите, чтобы номер столбца был динамическим, вы можете сделать это с помощью querySelectorAll
или любой фреймворк, представляющий подобную функциональность, например jQuery
здесь:
$('#myTable tr > *:nth-child(2)').hide();
(решение 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
сохранение других элементов в безопасности.
вы также можете скрыть столбец, используя элемент 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 в определенном индексе, чтобы иметь этот стиль.