Dovrei realizzare un particolare effetto su una tabella. Esempio:
tabella semplice semplice: 3 righe, 1 colonna

muovendo il mouse sulla prima riga, cambia il bordo di tutta la tabella
muovendo il mouse sulla seconda riga, cambia il bordo solo della seconda riga
muovendo il mouse sulla terza riga, cambia il bordo solo della terza riga

tipo cosi:
Codice PHP:
<html>
<head>

<style type="text/css">

table {
    width: 300px;
    background-color: gray;

}

table tr td{
    border-color: gray;
    border-style: solid;
}

</style>

</head>
<body>
<script type="text/javascript">

    function bordotop(){
        document.getElementById('riga1').style.borderLeftColor='yellow';
        document.getElementById('riga2').style.borderLeftColor='yellow';
        document.getElementById('riga3').style.borderLeftColor='yellow';
        document.getElementById('riga1').style.borderRightColor='yellow';
        document.getElementById('riga2').style.borderRightColor='yellow';
        document.getElementById('riga3').style.borderRightColor='yellow';
        document.getElementById('riga1').style.borderTopColor='yellow';
        document.getElementById('riga3').style.borderBottomColor='yellow';
    }
    function ripristinatop() {
        document.getElementById('riga1').style.borderLeftColor='gray';
        document.getElementById('riga2').style.borderLeftColor='gray';
        document.getElementById('riga3').style.borderLeftColor='gray';
        document.getElementById('riga1').style.borderRightColor='gray';
        document.getElementById('riga2').style.borderRightColor='gray';
        document.getElementById('riga3').style.borderRightColor='gray';
        document.getElementById('riga1').style.borderTopColor='gray';
        document.getElementById('riga3').style.borderBottomColor='gray';
    }
    function bordo(riga) {
        riga.style.borderColor='yellow';

    }
    function ripristina(riga) {
        riga.style.borderColor='gray';
    }

</script>
<table cellpadding="0" cellspacing="0" style="">
    <tr >
        <td id="riga1" onmouseover="bordotop();" onmouseout="ripristinatop()">a</td>
    </tr>
    <tr>
        <td id="riga2" onmouseover="bordo(this);" onmouseout="ripristina(this)">b</td>
    </tr>
    <tr>
        <td id="riga3" onmouseover="bordo(this);" onmouseout="ripristina(this)">c</td>
    </tr>
</table>
</body>
</html> 
Il problema, come potete vedere, è il bordo ai lati

che cosa proponete?