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>