Скрыть часть таблицы css

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

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

8 ответов

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

@Anuraj следует отметить, что: поддерживаются первый ребенок и т. Д.> IE 11 и Edge, в любом случае, хороший

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

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

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

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

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

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

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

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

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

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

#myTable tr td:nth-child(1), #myTable th:nth-child(1)

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

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

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

Источник

Раскрывающаяся HTML-таблица по клику

Задача. Есть длинная таблица и нужно сделать, чтобы часть таблицы скрывалась и раскрывалась по клику (см. Пример №1).

Раскрыть / Скрыть таблицу на CSS

Решение 1. Настроить скрытие лишних строк в таблице возможно использовав только средствами CSS и HTML. Код №1 из Примера №1:

/* Если браузер не поддерживает структурные псевдоклассы, то список будет раскрыт и доступ к данным сохранится */

[id^=»click-expand»]:not(:target) + .wrap-expand-table tbody tr:nth-of-type(n+5), /* 5 — порядковый номер строки, после которой строки будут скрыты */

1 — Таблиц может быть любое количество, нужно только менять id click-expand1 на click-expand2 или click-expand40

2 — Если браузер не поддерживает структурные псевдоклассы, то список будет раскрыт и доступ к данным сохранится

[id^=»click-expand»]:not(:target) + .wrap-expand-table tbody tr:nth-of-type(n+5) — порядковый номер строки — 5, после которой остальные строки будут скрыты

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Код из примера не работает.

Я только что скопировал Код 1, создал и вставил в HTML-документ. Всё работает.
Сам пример таблицы выше, над кодом https://i.imgur.com/IOskKGu.png у вас же работает?

Так…, опытным путём выяснил, что код конфликтует с js плавной прокрутки к якорям. Код брал из этого ответа: https://qna.habr.com/answer?answer_id=791294#answers_list_answer
Как совместить?

p.s.: примите обратную связь по UI этого сайта:
1) поля формы комментариев не удобная — не запоминает имя и почту, нет галки для сохранения в кукисах
2) При переключении на светлую тему текст в полях вообще не виден(

Из кода по вашей ссылке, честно, говоря, не знаю как решить. Думаю тут или использовать какое-то другое решение для скрытия строк таблицы либо не использовать скрипт плавной прокрутки. Этот скрипт применяется ко всем атрибутам href у которых есть «#».

Как вариант, предложил бы использовать для плавной прокрутки, вместо jquery, css-свойство «scroll-behavior» так:

На этом сайте с помощь этого свойства кнопка «на верх» (в правом нижнем углу) реализована https://wpcraft.top/prokrutka-vverh-na-html-i-css/

p.s. Спасибо за замечания. Учту.

Источник

Показать/скрыть столбцы таблицы html с помощью css

Я хочу отобразить базовую таблицу html с элементами управления для переключения/скрытия дополнительных столбцов:

 
 
Column 1
 
1a
 
1b
 
Column 2
 
2a
 
2b
 
 
100
 
40
 
60
 
200
 
110
 
90
 
 
 

Итак, столбец 1 и столбец 2 будут единственными столбцами, отображаемыми по умолчанию, но когда вы нажимаете на столбец 1, я хочу, чтобы 1a и 1b переключались, а также с столбцом 2 с 2a и 2b. У меня может быть больше столбцов и много строк, поэтому любые подходы к циклу javascript были слишком медленными, чтобы работать, когда я тестировал.

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

table.hide1 .col1 < display: none; >table.hide2 .col2 < display: none; >table.hide3 .col3 < display: none; >table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3

И затем настройте вызовы функции onClick на ячейках заголовка таблицы, которые вызовут переключатель, и определите, какой класс css для установки «mytable» на это создаст эффект переключения, который я ищу. Есть ли простой способ установить это, чтобы код мог работать для n # столбцов?

Update

Вот что я придумал, отлично работает и очень быстро. Сообщите мне, можете ли вы подумать о способах улучшения.

.col1 .col2 .col3 table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3

function toggleColumn(n) < var currentClass = document.getElementById("mytable").className; if (currentClass.indexOf("show"+n) != -1) < document.getElementById("mytable").className = currentClass.replace("show"+n, ""); >else < document.getElementById("mytable").className += " " + "show"+n; >> 

 
 
Col 1 = A + B + C
 
A
 
B
 
C
 
Col 2 = D + E + F
 
D
 
E
 
F
 
Col 3 = G + H + I
 
G
 
H
 
I
 
 
20
 
10
 
10
 
0
 
20
 
10
 
8
 
2
 
20
 
10
 
8
 
2
 
 
 

ОТВЕТЫ

Ответ 1

Нет, это в значительной степени. Теоретически вы можете использовать visibility: collapse для некоторых s, но поддержка браузера там не все.

Ответ 2

Одна строка кода с использованием jQuery:

$('td:nth-child(2)').hide(); // If your table has header(th), use this: //$('td:nth-child(2),th:nth-child(2)').hide(); 

Ответ 3

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

#tableid tr td:nth-child(3), #tableid tr th:nth-child(3)

Я использую это с тегом @media иногда, чтобы сконденсировать более широкие таблицы, когда экран слишком узкий.

Ответ 4

Я не думаю, что есть что-то, что вы можете сделать, чтобы избежать того, что вы уже делаете, однако, если вы создаете таблицу на клиенте с помощью javascript, вы всегда можете добавлять правила стиля динамически, поэтому вы можете разрешить любое количество столбцов без загромождения вашего файла css со всеми этими правилами. См. http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript, если вы не знаете, как это сделать.

Изменить: Для вашего «липкого» переключения вы должны просто добавлять имена классов, а не заменять их. Например, вы можете присвоить ему имя класса «hide2 hide3» и т.д. Я не думаю, что вам действительно нужны классы «show», поскольку это было бы по умолчанию. Библиотеки, такие как jQuery, делают это легко, но в отсутствие, такая функция может помочь:

var modifyClassName = function (elem, add, string) < var s = (elem.className) ? elem.className : ""; var a = s.split(" "); if (add) < for (var i=0; i> s += " " + string; > else < s = ""; for (var i=0; i> elem.className = s; > 

Источник

показать / скрыть столбцы HTML-таблицы с помощью CSS

Я хочу отобразить базовую таблицу html с элементами управления для переключения/скрытия дополнительных столбцов:

 
 
Column 1
 
1a
 
1b
 
Column 2
 
2a
 
2b
 
 
100
 
40
 
60
 
200
 
110
 
90
 
 
 

Итак, столбец 1 и столбец 2 будут единственными столбцами, отображаемыми по умолчанию, но когда вы нажимаете на столбец 1, я хочу, чтобы 1a и 1b переключались, а также с столбцом 2 с 2a и 2b. У меня может быть больше столбцов и много строк, поэтому любые подходы к циклу javascript были слишком медленными, чтобы работать, когда я тестировал. Единственный подход, который кажется достаточно быстрым, состоит в том, чтобы настроить некоторые css следующим образом:

table.hide1 .col1 < display: none; >table.hide2 .col2 < display: none; >table.hide3 .col3 < display: none; >table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3

И затем настройте вызовы функции onClick на ячейках заголовка таблицы, которые вызовут переключатель, и определите, какой класс css для установки «mytable» на это создаст эффект переключения, который я ищу. Есть ли простой способ установить это, чтобы код мог работать для n # столбцов?

Update

Вот что я придумал, отлично работает и очень быстро. Сообщите мне, можете ли вы подумать о способах улучшения. CSS

.col1 .col2 .col3 table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3

function toggleColumn(n) < var currentClass = document.getElementById("mytable").className; if (currentClass.indexOf("show"+n) != -1) < document.getElementById("mytable").className = currentClass.replace("show"+n, ""); >else < document.getElementById("mytable").className += " " + "show"+n; >> 

 
 
Col 1 = A + B + C
 
A
 
B
 
C
 
Col 2 = D + E + F
 
D
 
E
 
F
 
Col 3 = G + H + I
 
G
 
H
 
I
 
 
20
 
10
 
10
 
0
 
20
 
10
 
8
 
2
 
20
 
10
 
8
 
2
 
 
 

Итак, кажется, нет другого способа сделать это — но есть ли способ сделать это, так что это «липкое» переключение? Прямо сейчас, каждый раз, когда я показываю один столбец, другой отображаемый столбец переходит в состояние скрытия. Я думаю, я должен добавить правила CSS, чтобы конкретно обрабатывать каждую перестановку . Я надеюсь, что нет . не будет весело, если я имею дело с 5 столбцами показать / скрыть.

Хм IE7 не нравится решение, которое я отправил. Я могу заставить его работать со всеми столбцами, показанными по умолчанию, но не со скрытием по умолчанию .

Вы можете добавить несколько классов: table.className= ‘show1 show3’ и т. Д. Я подозреваю, что проблема IE заключается в том, что, как я уже говорил, он не поддерживает display: table-cell . Я бы использовал классы вроде hide вместо show , поэтому вам нужно только объявить table.hide1 col1 < display: none; >

Источник

показать/скрыть столбцы html-таблицы с помощью css

Я хочу отобразить основную html-таблицу с элементами управления для переключения показа/скрытия дополнительных столбцов:

 
 
Column 1
 
1a
 
1b
 
Column 2
 
2a
 
2b
 
 
100
 
40
 
60
 
200
 
110
 
90
 
 

Итак, столбец 1 и столбец 2 будут единственными столбцами, отображаемыми по умолчанию — но когда вы нажимаете на столбец 1 , я хочу, чтобы 1a и 1b переключались, и то же самое со столбцом 2 с 2a и 2b. В конечном итоге у меня может быть больше столбцов и много строк — поэтому любые подходы к зацикливанию javascript были слишком медленными для работы, когда я тестировал.

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

table.hide1 .col1 < display: none; >table.hide2 .col2 < display: none; >table.hide3 .col3 < display: none; >table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3

А затем настроить вызовы функции onClick на ячейках заголовка таблицы, которые будут вызывать переключение — и определить, какой css класс установить «mytable», чтобы создать эффект переключения, который я ищу. Есть ли простой способ настроить это так, чтобы код мог работать для n-ного количества столбцов?

Обновление

Вот что я придумал, работает отлично — и очень быстро. Дайте мне знать, если вы можете предложить способы улучшения.

.col1 .col2 .col3 table.show1 .col1 < display: table-cell; >table.show2 .col2 < display: table-cell; >table.show3 .col3

function toggleColumn(n) < var currentClass = document.getElementById("mytable").className; if (currentClass.indexOf("show"+n) != -1) < document.getElementById("mytable").className = currentClass.replace("show"+n, ""); >else < document.getElementById("mytable").className += " " + "show"+n; >>

 
 
Col 1 = A + B + C
 
A
 
B
 
C
 
Col 2 = D + E + F
 
D
 
E
 
F
 
Col 3 = G + H + I
 
G
 
H
 
I
 
 
20
 
10
 
10
 
0
 
20
 
10
 
8
 
2
 
20
 
10
 
8
 
2
 
 

Одна строчка кода с использованием jQuery:

$('td:nth-child(2)').hide(); // If your table has header(th), use this: //$('td:nth-child(2),th:nth-child(2)').hide();

Нет, это практически все. Теоретически для этого можно использовать visibility: collapse в некоторых ` «, но поддержка браузеров не везде есть.

если вы’вновь ищет простой скрыть столбец можно использовать через :nth-ребенок селектор, а также.

#tableid tr td:nth-child(3), #tableid tr th:nth-child(3)

Я использую это с помощью тега @СМИ иногда уплотнить широкие столы, когда экран слишком узкий.

Я не думаю, что вы можете что-то сделать, чтобы избежать того, что вы уже делаете, однако, если вы создаете таблицу на клиенте с помощью javascript, вы всегда можете добавить правила стиля динамически, таким образом, вы можете позволить любое количество столбцов, не загромождая ваш css файл всеми этими правилами. Смотрите http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript, если вы не знаете, как это сделать.

Редактировать: Для вашего «липкого» тумблера вам следует просто добавить имена классов, а не заменять их. Например, вы можете дать ему имя класса «hide2 hide3» и т.д. Я не думаю, что вам действительно нужны классы «show», поскольку они будут использоваться по умолчанию. Библиотеки вроде jQuery облегчают эту задачу, но в отсутствие таковых может помочь функция вроде этой:

var modifyClassName = function (elem, add, string) < var s = (elem.className) ? elem.className : ""; var a = s.split(" "); if (add) < for (var i=0; i> s += " " + string; > else < s = ""; for (var i=0; i> elem.className = s; >

Источник