Javascript 如何在两个表格单元格之间拉伸div？

我有一个数字从1到100的table元素，我想使用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

其中一些（或全部）可能是错误的，因为我尝试了它们，但似乎没有产生正确的行。用于演示。有人能纠正我，使这个算法产生正确的行吗

---

谢谢

将div的左上角定位到行的开始位置，将div的右下角定位到行的结束位置

div的外观如下所示：

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

.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;
}

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

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

.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{
背景：url（“数据：image/svg+xml；utf8，”）；
背景重复：无重复；
背景位置：中心；
背景尺寸：100%100%，自动；
位置：绝对位置；
}

请在此处查看，以直观方式查看：

.diag{
背景：url（“数据：image/svg+xml；utf8，”）；
背景重复：无重复；
背景位置：中心；
背景尺寸：100%100%，自动；
位置：绝对位置；
}

---

这应该能回答你的问题：@ChrisNash问题是我想让这种线在两个td元素之间延伸。我添加了

transform origin

是的，只需将div的左上角定位到行的开始位置，右下角定位到行的结束位置。在这个时代，你不需要算出对角线的基本三角。让css样式为您解决这个问题。