CSS /查询：将可点击图标放在表的th和td之间，而不使用第二个表

Question

我有一个标准表，如下所示：

<table>
    <thead>
        <tr>
            <th>column1</th>
            <th>column2</th>
            <th>column3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
    </tbody>
</table>

我想添加一个重叠的可点击图标，该图标位于每个th和它正下方的td之间。

这是视觉效果：

此重叠的图标/ div /单元格不应在其对应的th或td内部，因为它们将具有自己的jQuery事件（仅由图标触发，而不是由th或td触发）。 因此，基本上，单击th可以对数据进行排序，单击td可以编辑数据，单击中间的图标可以将列扩展为完整大小。

这些图标应完全属于表格及其相应表格列的一部分，因为它们的反应方式应与列相同（移动，拉伸，拖动，隐藏等）

为克服这个问题，我必须在原始表的顶部创建另一个不可见的表+ thead + th，并在其中包含图标，并使第二个表移动并做出与第一个表完全相同的反应。但这很麻烦，只会使脚本变得不必要地复杂。 我必须为每个作用于整体的事件同步两个表。没关系，但是代码真是一团糟。

是否有相对简单的一个表解决方案？ HTML，CSS或jQuery，我不在乎，只要它以简单的方式工作，这样我就可以专注于表格并期望图标表现出相应的行为。

我不是在问这个事件，而是在表的每一列和下方的第一列之间如何绑定图标。

谢谢。

PS：理想的做法是在每个th下方放置一个0px高的中间单元格（换句话说，是一个全新的tr），专门用于这些图标，但是该图标的z索引应大于其容器单元格，以便图标在视觉上应与顶部和底部td重叠（请参见上图）。此外，整个图标应在容器的区域之外保持可单击状态。但是我怀疑我的z-index可以大于其容器吗，可以吗？