Как сделать границы у ячеек при наведении на строку css

Как сделать границы у ячеек при наведении на строку css

Сегодня я расскажу вам о довольно не очевидном способе исправить очень большую проблему:) Дело в том, что иногда дизайнеры придумывают очень интересные решения, которые приходится реализовывать.

Вот только представьте. Перед вами таблица, в ней строки и ячейки. Каждая ячейка выделена рамкой. Необходимо сделать, чтобы при наведении на строку, все ячейки строки меняли цвет границы. При этом двойные рамки или "прыганье" строк не допускается. Думаете это просто? Попробуйте:)

А мы тем временем перейдем к решению этой задачи.


Для начала создадим разметку - это самая простая таблица с тремя строками:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>

Теперь зададим стили, немного оформим нашу границу и уберем двойную рамку:

table { 
	border-collapse: collapse; 
}
table td {
	border:2px solid green;
	padding:5px 20px;
}

И вот самое интересное! При наведении на строку сделаем замену цвета ячейки!

table tr:hover td
{
    border-style: double;
    border-color: red;
}

То есть мы говорим, что при наведении на строку, у ячеек этой строки надо отобразить двойную границу. При этом получившаяся граница коллапсится до нужной нам. Это супер решение!

Полный код страницы:

<!DOCTYPE html>
<html>
<head>
<title>Как сделать границы у ячеек при наведении на строку css</title>
<meta charset="utf-8">
<style>
table { 
	border-collapse: collapse; 
}
table td {
	border:2px solid green;
	padding:5px 20px;
}
table tr:hover td
{
    border-style: double;
    border-color: red;
}
</style>
</head>
<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>
</html>

26.03.17
Для просмотра сайта обновите браузер.