Javascript 表行内的绝对定位内容

我需要显示一些表格数据。我有带产品选项和规格的行，并且我以友好的方式添加了新行。另外，我可以删除一行，问题来了

每一行可能有N列，这可能会导致一些溢出（关于溢出，这是可以的）

我的问题如下：我想在每一行中显示一个“删除”按钮，该按钮仅在该行悬停时显示。我的想法是创建一个带有

位置：relative

的

，但我在HTML规范中发现这是不可能的

这是一个代码笔，展示了我试图实现的一点东西

谢谢

PS：如果可能的话，我想避免使用javascript

编辑：

---

另一件重要的事情是：删除按钮必须始终对用户可见，即使它在X轴上滚动，并且应该始终保持在同一位置。

是的，即使没有javascript，这也是可能的

这是基本的解决方案

<style>
    tr button{
        display: none;
    }
    tr{
        height: 30px;
    }
    tr:hover > td:last-child > button{
        display: block;
    }
</style>

<table cellspacing="0px">
    <tr>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>
            <button>Delete row</button>
        </td>
    </tr>
    <tr>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>
            <button>Delete row</button>
        </td>
    </tr>
    <tr>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>
            <button>Delete row</button>
        </td>
    </tr>
</table>

---

您可以将上面的所有代码粘贴到一个html文件中并运行它，以便看到差异。

是的，即使没有javascript，这也是可能的

这是基本的解决方案

<style>
    tr button{
        display: none;
    }
    tr{
        height: 30px;
    }
    tr:hover > td:last-child > button{
        display: block;
    }
</style>

<table cellspacing="0px">
    <tr>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>
            <button>Delete row</button>
        </td>
    </tr>
    <tr>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>
            <button>Delete row</button>
        </td>
    </tr>
    <tr>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>Some data</td>
        <td>
            <button>Delete row</button>
        </td>
    </tr>
</table>

---

您可以将上面的所有代码粘贴到一个html文件中并运行它，这样您就可以看到差异。

1的可能重复。把你的代码也放在这里。这会让你的问题对未来的观众更有用。2.为什么要避免JS？删除按钮必须始终对用户可见，即使它在X轴上滚动，并且应该始终保持在同一位置，这就是为什么它不会重复。1-好的，我会尝试。2-我想避免使用javascript，因为它可能会导致高性能的影响，因为它可能有N行和N个单元格。基本上，您可以为delete按钮指定一列，使该列的位置绝对（意味着单元格是绝对的），您可以先隐藏按钮，然后在该行悬停时，显示按钮可能重复的1。把你的代码也放在这里。这会让你的问题对未来的观众更有用。2.为什么要避免JS？删除按钮必须始终对用户可见，即使它在X轴上滚动，并且应该始终保持在同一位置，这就是为什么它不会重复。1-好的，我会尝试。2-我想避免使用javascript，因为它可能会导致高性能的影响，因为它可能有N行和N个单元格。基本上，你可以为delete按钮指定一列，使该列的位置绝对（意味着单元格是绝对的），你可以先隐藏按钮，然后在该行悬停时显示button这是一个很好的答案，但它有固定的大小值。。。我可能对每一列有不同的大小。这是一个很好的答案，但它有固定的大小值。。。我可能有不同的大小为每列。