为什么我的div元素排队？

Question

我有一个包含65列的表格。我还需要允许用户调整列的宽度。所以我在表格上覆盖了一个透明div，减去了任何滚动条的宽度，所以就在桌子上方。

然后我在这个叠加div中创建div元素，左边的样式基于表格列的累积宽度。

这适用于列数不超过25的表。但随后重叠的div元素开始错位。

以下是创建div元素的代码：

$rootScope.recalcDivs = function (table, grips) {
  var divs = '';
  var left = -table.scrollLeft;
  var headerRow = table.children[0].children[0];
  var columns = headerRow.children.length;
  for (var i = 0; i < columns; ++i) {
    left += $rootScope.parseWidth(headerRow.cells[i].style.minWidth);
    divs += "<div class='" + i + "' style='border-right: solid 1px red; position: absolute; cursor: e-resize; height: " + grips.style.height + "; left: " + left + "px;'></div>";
  }

  grips.innerHTML = divs;
}

有什么想法吗？