在悬停时突出显示表格行会显示列之间的空白区域

时间:2011-03-15 13:46:31

标签: javascript html css highlighting

我一直在寻找答案,但无法在网上找到答案。

基本上,如果用户将鼠标悬停在表格行上,我想突出显示一个表格行。

我可以使用css或jquery执行此操作,但两者都显示列之间的空白区域,因此看起来非常难看。

我想知道是否有办法解决这个问题?

列间隔的方式是在html中的表声明中使用cellspacing

<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">`

在CSS中:

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

1 个答案:

答案 0 :(得分:2)

使用:

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

如果你想在你的单元格中有空格,请使用CSS:

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