javascript - 在悬停时突出显示表格行显示列之间的空白

Question

我一直在寻找这个问题的答案，但在网上找不到。

基本上我想在用户将鼠标悬停在表格行上时突出显示它。

我可以使用 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; }

Answer 1

使用:

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

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

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