Border table com problema

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>