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

Question 1

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

Question 2

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

<td style="display:none;">

Question 3

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

Question 4

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

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

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

Question 5

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

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

Question 6

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

Question 7

Вы также можете скрыть столбец с помощью элемента 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.

Question 8

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

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

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

Question 9

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

Question 10

<!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);

Answer 1

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

Answer 2

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, в любом случае хороший

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

Answer 3

1

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

офис 302,

Answer 4

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

офис 302,

Answer 5

1

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

Anuraj

Answer 6

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

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

Answer 7

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,

Answer 8

1

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

Рик Смит

Answer 9

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

Кос,

Answer 10

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

Рик Смит

Answer 11

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

Cinoss,

Answer 12

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

Answer 13

1

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

Дов Миллер,

Answer 14

5

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

SteveB

Answer 15

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

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

Answer 16

10

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

theapache64
источник

Answer 17

Вы также можете скрыть столбец с помощью элемента 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.

Answer 18

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

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

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

Answer 19

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

Answer 20

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

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

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

Answer 21

2

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

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

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

Ответы: