将 SVG 叠加在表格主体顶部

Question

是否可以将 SVG 画布覆盖在可滚动的 tbody 之上？我需要在我的 trs 中的 div 之间画线。如果可以将 SVG 画布覆盖在可滚动的 tbody 上，那么任何示例都会非常感激。

以下是我正在使用的表的示例，表溢出是自动的。在此示例中，我尝试在“连接 1”和“连接 2”之间画一条线，并且当我向左/向右或向上/向下滚动表格时，我希望使该线保持与这两个组件的连接。

<table>

  <thead>

    <tr>

      <th>1 </th>

      <th>2 </th>

      <th>3 </th>

    </tr>

  </thead>

  <tbody>

    <svg style="

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;">

  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line>

</svg>

    <tr style="height: 30px;">

      <td style="position: absolute; left: 100px;">

        <div>Connection 1 </div>

      </td>

    </tr>

    <tr style="height: 30px;">

      <td>

        <div style="position: absolute; left: 200px;">Connection 2 </div>

      </td>

    </tr>

    <tr style="height: 30px;">

      <td>

        <div style="position: absolute; left: 400px;">Connection 3 </div>

      </td>

    </tr>

    <tbody>

</table>

Answer 1

我能够让它工作，我必须去寻找position: relative;并在里面标记<table><tbody><svg><tbody>position: absolute; width: 100%; height: 100%;