Highlighting a table row on hover shows the white-space between columns

Question

I have been searching for an answer to this but can't find it on the net.

Basically I want to highlight a table row if the user hovers over it.

I can do this using css or jquery but both show the white space between the columns so it looks pretty ugly.

I was wondering if there was a way to solve this?

The way the columns are spaced out is by using cellspacing in the table declaration in the html.

<script type="text/javascript">
$(document).ready(function(){
    $('.highlight').hover(function(){
        $(this).children().addClass('datahighlight');
    },function(){
        $(this).children().removeClass('datahighlight');
    });
  });
  </script>`

<table class="gig-table" cellspacing="30">
<tr class="highlight">`

In the CSS:

.datahighlight { background-color:#cc0099 !important; }

Answer 1

Use:

 <table cellspacing="0" cellpadding="0">

And if you want to have spaces inside your cells use the CSS:

  td {padding:10px;}
  tr:hover {background-color:magenta;} /* does not works in old IE versions */