Css 响应性设计：桌子上的绝对定位div

这个截图基本上展示了我想做的事情。基本上，当用户单击更新图标时，它会打开一个菜单，现在高亮显示的编辑图标与原始图标处于相同的位置

但是，当我更改屏幕大小时，表格行的宽度会更改，图标不再对齐

我希望图标排成一行，无论使用什么设备，但不知道如何实现这一点

未选定单元格的html+css如下所示：

<td style="text-align:right; font-color=blue;">
    <span style="top:3px; position=relative;">
        icon code
    </span>
</td>

所选单元格的和：

<td>
    <div style="position:absolute; top:5px; right:3.5vw; width:370%;">
        ....
    </div>
</td>

---

有几种方法可以做到这一点，但最简单的可能是不使用图标，添加菜单，然后使用z-index将图标放在上面：忽略任何额外的标记，我不确定您的工作示例是什么样子

*{ 保证金：0； 填充：0； } .我的桌子{ 宽度：100%； 背景：FFF； 字体：500 24px/45px Arial； 表布局：固定； 边框：1px实心CCC； 边框底部：无； 边界塌陷：塌陷； } .mytable td{ 填充：0 25px； 边框底部：1px实心CCC； } .mytable.td.菜单{ 文本对齐：右对齐； 位置：相对位置； 溢出：可见； 最大宽度：50px； } .mytable输入{ 显示：无； } .mytable i{ 位置：相对位置； 颜色：红色； z指数：1； 光标：指针； } .mytable输入：选中+标签i{ 颜色：蓝色； z指数：3； } .mytable输入：选中~div{ 显示：块； } .mytable分区{ 显示：无； 位置：绝对位置； 排名前10%； 右：8%； 填充顶部：35px； 背景：FFF； 盒影：0 3px 8px rgba0,0,0.5； z指数：2； } .mytable ul{ 列表样式类型：无； } 李先生{ 保证金：0； 填充：0 12px； 空白：nowrap； } 一些 数据 在这里 菜单项 其他菜单项 此菜单项 一些 数据 在这里 菜单项 其他菜单项 此菜单项 一些 数据 在这里 菜单项 其他菜单项 此菜单项

---

这是一个很棒的建议，在90%的情况下看起来都很棒。现在我遇到了一个问题，在较大的屏幕尺寸中，图标与菜单项不对齐，因为图标没有移动，但菜单位置会根据屏幕大小而变化。找到了解决方案，而不是用“右”定位，用“左”定位和负值。想想看吧