Как сделать рамку при наведении?

Question

[MRcracker]

Есть таблица. В таблице убрал стандартные отступы. Сделал так, чтобы она имела фиксированные размеры и если не помещается в экран у таблицы появлялся скролл.

У таблицы при наведении должна появляться рамка, но в моем случае рамка получается не у всех ячеек.
Подскажите, как исправить?

<div class="table-wrap">
<table class="table">
					<thead>
						<tr>
							<th>Title</th>
							<th>Title</th>
							<th>Title</th>
							<th>Title</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Title</td>
							<td>Title</td>
							<td>Title</td>
							<td>Title</td>
							<td>Title</td>
						</tr>
						<tr>
							<td>Title</td>
							<td>Title</td>
							<td>Title</td>
							<td>Title</td>
							<td>Title</td>
						</tr>
						<tr>
							<td>Title</td>
							<td>180</td>
							<td>145</td>
							<td>20</td>
							<td>6</td>
						</tr>
						<tr>
							<td>Title</td>
							<td>200</td>
							<td>160</td>
							<td>25</td>
							<td>8</td>
						</tr>
						<tr>
							<td>Title</td>
							<td>170</td>
							<td>135</td>
							<td>18</td>
							<td>5</td>
						</tr>
					</tbody>
				</table>
</div>

<code lang="css">
table
	border-collapse: collapse
  
.table-wrap
	overflow: auto

.table
	background-color: #fff
	border-radius: 8px
	cursor: text
	width: 100%
	min-width: 800px
	th, td
		padding: 20px
	tbody
		tr
			&:hover
				box-shadow: 0 0 0 2px red
				padding: 18px
			&:nth-child(odd)
				background-color: #eee
</code>

Comments

[Lord_Dantes]

Код заливайте в песочницу, например в кодпен