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

94

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

html asp.net html-table

— user601367
источник

175

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

<td style="display:none;">

— Анурадж
источник

1

как насчет только первого столбца с использованием css HTML

— офис 302,

как мне добавить к нему стиль, когда я создаю таблицу с помощью javascript createelement (td);

— офис 302,

1

@ office302 Применить этот стиль только к первому тд? Или вы хотите использовать только CSS - вы можете сделать что-то вроде этогоtd:first-child { display:none; }

— Anuraj

@Anuraj следует отметить, что: first-child и т. Д. Поддерживаются> IE 11 и Edge, в любом случае хороший

— Виталий Терзиев

88

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

— Кос
источник

1

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

— Рик Смит

@RickSmith Хороший вопрос. Обновил мой пост, чтобы избежать проблемы другим способом (используя дочерний селектор).

— Кос,

дочерний селектор определенно лучше. Хороший ответ.

— Рик Смит

Хорошее решение, но в случае с colspan нужно уделить больше внимания.

— Cinoss,

30

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

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

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

— Дов Миллер
источник

1

Я обнаружил, что для тегов div коллапс также будет содержать пробел. Для тегов div вам нужно будет использовать display: none; чтобы действительно рухнуть и не удерживать пространство.

— Дов Миллер,

5

visibility: collapseразработан специально для обработки отображения / скрытия ячеек, так как существует разница при пересчете ширины / высоты ячейки между этим и display:none. См developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

— SteveB

28

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

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

— Рик Смит
источник

10

Bootstrap использует .hiddenclass на <td>.

— theapache64
источник

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.

— Полковник Паник
источник

2

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

Развернуть фрагмент

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

— сувик
источник

1

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

— тамаринтех
источник

0

<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>

var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table  tr td:nth-child("+ column +"),table th:nth-child("+ column +") 
{display: none}";
styleSheet.insertRule(rule);

— Альберт
источник

2

Надеюсь, это решит проблему, но, пожалуйста, добавьте с ним объяснение вашего кода, чтобы пользователь получил полное представление о том, чего он / она действительно хочет.

— Джаймил Патель