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

Ответ 1

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

<td style="display:none;">

Ответ 2

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

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

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

Здесь демо.

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

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

Демо с jQuery

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

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

Ответ 8

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