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

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

73 голоса | спросил user601367 26 MaramSat, 26 Mar 2011 09:11:53 +03002011-03-26T09:11:53+03:0009 2011, 09:11:53

8 ответов


0

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

<td style="display:none;">
ответил Anuraj 26 MaramSat, 26 Mar 2011 09:30:12 +03002011-03-26T09:30:12+03:0009 2011, 09:30:12
0

Вы можете использовать селектор 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 ).

ответил Kos 22 42012vEurope/Moscow11bEurope/MoscowThu, 22 Nov 2012 16:08:20 +0400 2012, 16:08:20
0

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

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

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

ответил Dov Miller 22 42012vEurope/Moscow11bEurope/MoscowThu, 22 Nov 2012 15:52:44 +0400 2012, 15:52:44
0

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

#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 сохраняя ваши другие элементы в безопасности.

ответил Rick Smith 7 PMpTue, 07 Apr 2015 23:11:27 +030011Tuesday 2015, 23:11:27
0

Пользователи начальной загрузки используют класс .hidden в <td>.

ответил theapache64 7 Jpm1000000pmThu, 07 Jan 2016 20:26:11 +030016 2016, 20:26:11
0

Вы также можете скрыть столбец, используя элемент 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/р /хром /вопросы /детали? ID = 174167

ответил Colonel Panic 31 SatEurope/Moscow2016-12-31T19:16:13+03:00Europe/Moscow12bEurope/MoscowSat, 31 Dec 2016 19:16:13 +0300 2016, 19:16:13
0

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

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

ответил souvik sett 8 Mayam15 2015, 11:32:18
0

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

ответил tamarintech 26 MaramSat, 26 Mar 2011 09:31:57 +03002011-03-26T09:31:57+03:0009 2011, 09:31:57

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132