jquery - 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，其中包含图标，并使第二个表格移动并与第一个表格完全一样。但这很乏味，只会使脚本变得不必要地复杂。我必须为每个作用于整体的事件同步两个表。没关系，但代码真的很乱。

我的问题有一个相对简单的ONE TABLE解决方案吗？HTML、CSS 或 jQuery，我不在乎，只要它以简单的方式工作，这样我就可以只专注于表格并期望图标相应地表现。

我不是在问这个事件，只是如何在每个 th 和它下面的第一个之间将一个图标绑定到表格列。

谢谢。

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

标签： jquerycsshtml-tabledatatables