javascript - 如何在两个表单元格之间拉伸(stretch)div？

我有一个表格元素，数字从1到100，我想以编程方式使用CSS在任何两个单元格之间添加行。为此，我创建了一个绝对位置的div。现在，我应该使用像元的偏移量来计算该div的位置，高度和旋转度。

让我们将s设为“起点”单元格的偏移量，并将e设为“终点”单元格的偏移量。


我认为div的偏移量应类似于s的偏移量。
根据毕达哥拉斯定理，我认为高度应为Math.sqrt( Math.pow(s.top-e.top, 2) + Math.pow(s.left-e.left, 2) )。
使用三角函数，我认为旋转度应为-Math.atan2(s.top-e.top, s.left-e.left)*180/Math.PI。


其中一些（或全部）可能是错误的，因为我尝试了它们，但似乎无法产生正确的行。 Here's a fiddle进行演示。谁能纠正我，以便此算法可以产生正确的行？

谢谢！

最佳答案

将div的左上角定位到该行的起点，将div的右下角定位到该行的末尾。

div将如下所示：

<div class="diag" style="top: 0px; right: 100px; bottom: 300px; left: 0px;"></div>

然后在CSS中使用SVG图片，如下所示：

.diag {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    position: absolute;
}

看看这里以直观的方式查看它：

.diag {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
  position: absolute;
}

<div class="diag" style="top: 0px; right: 100px; bottom: 300px; left: 0px;"></div>