Border table com problema

[safire 0]

Fiz uma tabela com html e css mas as bordas estão com problema.

Ao passar o mouse em cima, algumas saem o estilo.

No chrome é possível visualizar melhor o que acontece, as bordas ficam pretas; no Firefox as bordas apenas não aparecem mais.

 

Poderiam e ajudar em como resolver isso?

 

https://jsfiddle.net/safirelauene/yj18kdux/1/

<style type="text/css">
.tabela1{
	border:1px solid #ccc;
	border-spacing:0;
	border-collapse:collapse;
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	-webkit-box-shadow: 1px 1px 20px 5px #CCCCCC;
	box-shadow: 1px 1px 20px 5px #CCCCCC;
	
	width:80%;
	margin-left:10%;
	
}

.tabela1 th{
	border:1px solid #ccc;
	padding: 5px;
}

.tabela1 tr td{
	/* cor das linhas */
	background-color: #959595;
	
	color: #fff;
	text-shadow: 0px 0px 1px #EDEDED;
	border:1px solid #ccc;
	padding: 10px;
	text-align:center;
	
	-webkit-transition-duration: 0.9s;
	transition-duration: 0.9s;

	

	
}

.tabela1 tr td:hover,.tabela1 tr td:focus,.tabela1 tr td:active {  
	opacity: 0.7;
	
	
}
	


</style>

<table class="tabela1">
	<tr>
		<th>Coluna 1</th>
		<th>Coluna 2</th>
		<th>Coluna 3</th>
	</tr>
	<tr>
		<td>Linha</td>
		<td>Linha</td>
		<td>Linha</td>
		
	</tr>
	<tr>
		<td>Linha</td>
		<td>Linha</td>
		<td>Linha</td>
	</tr>
</table>
 

[rikaschmitt 54]

É conflito da animação com a opacidade.

Troque o "opacity: 0.7" pelo background já com a opacidade:

background-color: rgba(149,149,149, 0.7);

[safire 0]

Muito obrigada! Deu certo! :)