Показать сообщение отдельно
  #4 (permalink)  
Старый 27.01.2020, 12:34
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 48

Malleys,
спасибо, всё получилось.
теперь возник ещё вопрос
как добиться того, чтобы при наведении курсора (hover) стили css не касались заголовка в таблице th?

В данном случае - нужно чтобы при наведении на заголовок не было красной рамки, а только на строках с именами






<style>
table {border-collapse: collapse;}

td, th {
	border: 1px solid rgba(128, 128, 128, 0.25);
	padding: 0.5em;
}


table > tbody > tr:first-child {background-color: #999;}
table  tbody:nth-child(odd):hover {box-shadow: 0 0 0 2px red inset;}
table  tbody:nth-child(even):hover {box-shadow: 0 0 0 2px blue inset;}
</style>
<table>
	<tbody>
		<th>
			<td>Имя</td>
			<td>Предмет</td>
			<td>Кол-во</td>
		</th>
		<tr>
			<td rowspan="4">Маша</td>
			<td>Карандаш</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Ручка</td>
			<td>3</td>
		</tr>
		<tr>
			<td>Блокнот</td>
			<td>4</td>
		</tr>
		<tr>
			<td>Прищепка</td>
			<td>4</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td rowspan="3">Саша</td>
			<td>Шишка</td>
			<td>5</td>
		</tr>
		<tr>
			<td>Мышка</td>
			<td>1</td>
		</tr>
		<tr>
			<td>Батарейка</td>
			<td>6</td>
		</tr>
	</tbody>
</table>

Последний раз редактировалось tp-20, 27.01.2020 в 13:12.
Ответить с цитированием