CSS background-color on colgroup when scroll is visible

Question

So I've got a page which may or may not contain one or more large and complex table(s). With JQuery I add background-color to both tr and colgroup when hovering over the table(s).

The problem is when I have more than one table, the page is larger than the viewport (scrollbar is visible), and it does NOT affect the first table. I really don't know how to explain it, just run the snippet below in fullscreen and you'll see. Also, this does not happen in IE it seems.

$("table").delegate('td','mouseover mouseleave', function(e) {
  var $table = $(this).closest('table');
  if (e.type == 'mouseover') {
    $(this).parent().addClass("hover");
    $table.children("colgroup").children("col").eq($(this).index()).addClass("hover");
  } else {
    $(this).parent().removeClass("hover");
    $table.children("colgroup").children("col").eq($(this).index()).removeClass("hover");
  };
});

.hover {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="margin: 60px;" cellpadding="10" cellspacing="0">
  <colgroup>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
  </colgroup>
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
      <th>col5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1a</td>
      <td>2a</td>
      <td>3a</td>
      <td>4a</td>
      <td>5a</td>
    </tr>
    <tr>
      <td>1b</td>
      <td>2b</td>
      <td>3b</td>
      <td>4b</td>
      <td>5b</td>
    </tr>
    <tr>
      <td>1c</td>
      <td>2c</td>
      <td>3c</td>
      <td>4c</td>
      <td>5c</td>
    </tr>
    <tr>
      <td>1d</td>
      <td>2d</td>
      <td>3d</td>
      <td>4d</td>
      <td>5d</td>
    </tr>
    <tr>
      <td>1e</td>
      <td>2e</td>
      <td>3e</td>
      <td>4e</td>
      <td>5e</td>
    </tr>
    <tr>
      <td>1f</td>
      <td>2f</td>
      <td>3f</td>
      <td>4f</td>
      <td>5f</td>
    </tr>
    <tr>
      <td>1g</td>
      <td>2g</td>
      <td>3g</td>
      <td>4g</td>
      <td>5g</td>
    </tr>
    <tr>
      <td>1h</td>
      <td>2h</td>
      <td>3h</td>
      <td>4h</td>
      <td>5h</td>
    </tr>
    <tr>
      <td>1i</td>
      <td>2i</td>
      <td>3i</td>
      <td>4i</td>
      <td>5i</td>
    </tr>
    <tr>
      <td>1j</td>
      <td>2j</td>
      <td>3j</td>
      <td>4j</td>
      <td>5j</td>
    </tr>
    <tr>
      <td>1k</td>
      <td>2k</td>
      <td>3k</td>
      <td>4k</td>
      <td>5k</td>
    </tr>
    <tr>
      <td>1l</td>
      <td>2l</td>
      <td>3l</td>
      <td>4l</td>
      <td>5l</td>
    </tr>
  </tbody>
</table>
<table style="margin: 60px;" cellpadding="10" cellspacing="0">
  <colgroup>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
  </colgroup>
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
      <th>col5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1a</td>
      <td>2a</td>
      <td>3a</td>
      <td>4a</td>
      <td>5a</td>
    </tr>
    <tr>
      <td>1b</td>
      <td>2b</td>
      <td>3b</td>
      <td>4b</td>
      <td>5b</td>
    </tr>
    <tr>
      <td>1c</td>
      <td>2c</td>
      <td>3c</td>
      <td>4c</td>
      <td>5c</td>
    </tr>
    <tr>
      <td>1d</td>
      <td>2d</td>
      <td>3d</td>
      <td>4d</td>
      <td>5d</td>
    </tr>
    <tr>
      <td>1e</td>
      <td>2e</td>
      <td>3e</td>
      <td>4e</td>
      <td>5e</td>
    </tr>
    <tr>
      <td>1f</td>
      <td>2f</td>
      <td>3f</td>
      <td>4f</td>
      <td>5f</td>
    </tr>
    <tr>
      <td>1g</td>
      <td>2g</td>
      <td>3g</td>
      <td>4g</td>
      <td>5g</td>
    </tr>
    <tr>
      <td>1h</td>
      <td>2h</td>
      <td>3h</td>
      <td>4h</td>
      <td>5h</td>
    </tr>
    <tr>
      <td>1i</td>
      <td>2i</td>
      <td>3i</td>
      <td>4i</td>
      <td>5i</td>
    </tr>
    <tr>
      <td>1j</td>
      <td>2j</td>
      <td>3j</td>
      <td>4j</td>
      <td>5j</td>
    </tr>
    <tr>
      <td>1k</td>
      <td>2k</td>
      <td>3k</td>
      <td>4k</td>
      <td>5k</td>
    </tr>
    <tr>
      <td>1l</td>
      <td>2l</td>
      <td>3l</td>
      <td>4l</td>
      <td>5l</td>
    </tr>
  </tbody>
</table>

What is going on!?

Answer 1

I made a workaround with the nth-child(n) selector, thus eliminating the need for col and colgroup.

$("table").delegate('td','mouseover mouseleave', function(e) {
    if (e.type == 'mouseover') {
        $(this).closest("table").find("tr td:nth-child(" + ($(this).index()+1) + ")").addClass("hover");
        $(this).parent().addClass("hover");
    } else {
        $(this).closest("table").find("tr td:nth-child(" + ($(this).index()+1) + ")").removeClass("hover");
        $(this).parent().removeClass("hover");
    };
});