在表格的顶部覆盖 SVG

Question

是否可以在可滚动的 tbody 顶部覆盖 SVG 画布？我需要在我的 trs 中的 div 之间画线。如果可以在可滚动的 tbody 上覆盖 SVG 画布，则非常感谢任何示例。

以下是我正在使用的表的示例，表溢出是自动的。在此示例中，我试图在“连接 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%;