你可以使用SVG元素和CSS样式来绝对定位覆盖在表格上。并通过JavaScript DOM API（如
getBoundingClientRect()）获取起始点和结束点。
这里是一个演示
（链接）。（该演示使用Angular制作，但您可以在任何地方使用它。纯JavaScript示例请参见下文。）
const startElement = document.querySelector('#start');
const endElement = document.querySelector('#end');
const startRect = startElement.getBoundingClientRect();
const endRect = endElement.getBoundingClientRect();
const startX = startRect.right;
const startY = startRect.top;
const endX = endRect.left;
const endY = endRect.bottom;
您可以动态更改起始和结束位置。只需重新调用该方法即可获取位置。请注意，我使用左、上、右、下来放置元素边缘的箭头。您可以通过比较两个位置来计算中心点或边缘。
您必须将SVG放在表格上方。您可以通过设置CSS
position: absolute; left: 0; top: 0 来实现此目的。但是请注意，您的父元素也应具有
position属性。例如：
position: relative。
更新：这里
（链接）是一个纯JavaScript演示。单击左侧以查看所有文件，并选择 index.js 以查看JS内容（就像在VS Code中一样）。
完整代码：
<table style="position: absolute; left: 0; top: 0;">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td id="end">9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td id="start">0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<svg style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto"
markerUnits="strokeWidth" viewBox="0 0 20 20">
<path d="M0,0 L0,6 L9,3 z" fill="#f00" />
</marker>
</defs>
<line id="svg-line" stroke="#f00" stroke-width="5"
marker-end="url(#arrow)" />
</svg>
</table>
<script>
const svgLine = document.querySelector('#svg-line');
const startElement = document.querySelector("#start");
const endElement = document.querySelector("#end");
const startRect = startElement.getBoundingClientRect();
const endRect = endElement.getBoundingClientRect();
const startX = startRect.right;
const startY = startRect.top;
const endX = endRect.left;
const endY = endRect.bottom;
svgLine.setAttribute('x1', startX);
svgLine.setAttribute('y1', startY);
svgLine.setAttribute('x2', endX);
svgLine.setAttribute('y2', endY);
</script>
只需将上面的代码复制到一个新的空html文件中，并在浏览器中运行即可。
顺便说一句，您也可以使用画布(canvas)来实现这个功能。(svg的替代方案)
