Highlighting the row in html table?
===

I use the following programs for create the highlighting the row in mouse over event.it was working fine.But my problem is if mouse over the particular row the whitespace are occuring in between the highlighting bar?How to remove the whitespace?

  Table Creation:   
    <table border="0" id="TabDeclaration"  width="100%" cellpadding="5" cellspacing="3" border="2">
    
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
            <td>azaz</td>
        </tr>
        
        <tr>
            <td>cccc</td>
            <td>dddd</td>
        </tr>
         <tr>
            <td>eeee</td>
            <td>ffff</td>
        </tr>      
        
    </table>
jquery for call css:

    $('#TabDeclaration tr').mouseover(function() {
        if($.trim($(this).text()) != '')
           $(this).addClass('hovered');
    }).mouseout(function() {
        $(this).removeClass('hovered');
    });

Css:

    .hovered td {
            background: #ddd;
        }

