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

Question

[Макс]

У меня есть обычная таблица:

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

Мне нужно, чтобы при наведении на первую ячейку вся строка выделялась в единичную рамку. Рамок между самими ячейками быть не должно. Как бы обводка всей строки должна быть.
Я сделал так:

td:first-child:hover {
    border-left: 1px solid green;
    border-top: 1px solid green;
    border-bottom: 1px solid green;
}

td:first-child:hover ~ td {
    border-top: 1px solid green;
    border-bottom: 1px solid green;
}

td:first-child:hover ~ td:last-child {
    border-right: 1px solid green;
}

Но border-top работает только для первой строки, так как благодаря border-collapse: collapse рамка принадлежит td-шкам предыдущей строки и выглядит это следующим образом:

Пробовал и через border-collapse: separate; border-spacing: 0. Но в таком случае получается двойная рамка между ячейками, а мне это не нужно:

Comments

[Ankhena]

Нарисуйте псевдоэлемент

Answer 1

[ksnk]

Лучше на JS добавлять класс элементу TR и от него плясать с раскраской. Но можно пользоваться псевдоэлементом has, он уже почти везде есть...
https://codepen.io/ksnk/pen/dygbmWL

Comments

[Макс]

Немного причесал ваш код, получилось, спасибки за идею))
https://codepen.io/projct1/pen/wvYwZWr