Question

我需要显示一些表格数据。我有产品选项和规格的行，我在dinamically添加新行。此外，我可以删除一行，这就是问题所在。

每行可能有N列，这可能会导致一些溢出（这对溢出来说没问题。）

我的问题如下：我想在每一行中显示一个“删除”按钮，该按钮仅在该行悬停时出现。我的想法是使用<tr>创建position: relative但我在HTML规范中发现这是不可能的。

这是一个代码，展示了我想要实现的一点点。

https://codepen.io/buenopw/pen/YQbXOq

谢谢！

PS：我想尽可能避免使用javascript。

修改

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

Answer 1

是的，即使没有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>

然而，要使其更加灵活，button始终位于屏幕的最右侧（正如您所希望的那样），我建议您使用{{1}为此而现在div

例如

table

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

表行内的绝对定位内容

1 个答案: