ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Скрытие строк таблицы с помощью CSS
3 сообщений из 3, страница 1 из 1
Скрытие строк таблицы с помощью CSS
    #39126611
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Хочу сделать скрытие/отображение строк в таблице с помощью CSS (без JS).
Делаю так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<div id="info-client">
	<div class="expand">
		<h2>Пробная таблица</h2>
		<label class="expand-control">Подробно</label>
		<input class="expand-control" type="checkbox" />
		<table class="grid">
			<tbody>
				<tr>
					<td>1</td>
					<td>2</td>
				</tr>
				<tr class="expand">
					<td>3</td>
					<td>4</td>
				</tr>
				<tr class="expand">
					<td>5</td>
					<td>6</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
#info-client > .expand > input.expand-control ~ table.grid
, #info-client > .expand > input.expand-control ~ table.grid td
{
	border: 1px solid;
}

#info-client > .expand > input.expand-control ~ table.grid tr.expand
, #info-client > .expand > input.expand-control ~ table.grid tr.expand td
{
	display: none;
}

#info-client > .expand > input.expand-control:checked ~ table.grid tr.expand
, #info-client > .expand > input.expand-control:checked ~ table.grid tr.expand td
{
	display: unset;
}



Но работает неадекватно, при нажатии на "Подробно" получается очень странный результат.
Если сделать так:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
#info-client > .expand > input.expand-control:checked ~ table.grid tr.expand
{
	display: table-row;
}

#info-client > .expand > input.expand-control:checked ~ table.grid tr.expand td
{
	display: table-cell;
}


тогда работает нормально.
А почему не работает первый вариант (с unset)?
Проверял в браузере, который unset поддерживает (Хром 47).
________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
...
Рейтинг: 0 / 0
13.12.2015, 10:33
| Ответить | Цитировать | Написать  
Скрытие строк таблицы с помощью CSS
    #39126777
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Кстати, если сделать наоборот (при checked скрывать строки), то стили получаются короче:
Код: css
1.
2.
3.
4.
#info-client > .expand > input.expand-control:checked ~ table.grid .expand
{
	display: none;
}
...
Рейтинг: 0 / 0
13.12.2015, 19:18
| Ответить | Цитировать | Написать  
Скрытие строк таблицы с помощью CSS
    #39127270
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
#info-client > .expand > input.expand-control ~ table.grid tr.expand{display: none;}
#info-client > .expand > input.expand-control:checked ~ table.grid tr.expand{display: table-row;}

Alibek B.А почему не работает первый вариант (с unset)?
без понятия
...
Рейтинг: 0 / 0
14.12.2015, 13:40
| Ответить | Цитировать | Написать  
3 сообщений из 3, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Скрытие строк таблицы с помощью CSS
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]