Как скрыть столбцы в таблице HTML? - PullRequest
Новая
       7

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

81 голосов
/ 26 марта 2011

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

Ответы [ 8 ]

150 голосов
/ 26 марта 2011

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

<td style="display:none;">
80 голосов
/ 22 ноября 2012

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

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

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

Вот демонстрация.

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

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

Демо с jQuery

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

25 голосов
/ 22 ноября 2012

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

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

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

22 голосов
/ 07 апреля 2015

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

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

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

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

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

10 голосов
/ 07 января 2016

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

5 голосов
/ 31 декабря 2016

Вы также можете скрыть столбец, используя элемент col https://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

2 голосов
/ 08 мая 2015 

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

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

1 голос
/ 26 марта 2011

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

...