Html CSS：当图标在悬停状态下切换可见性时，表列移动

这是普朗克-

问题是，当我在每一行上悬停时，列会向左移动，这是不可取的

我希望图标在鼠标悬停时出现和消失，但表列不会移动其位置

我怎样才能做到这一点

---

谢谢

再添加一个

th

和

<th>&nbsp;</th>

提示：为所有列指定宽度，并关闭

名称
数量

---

我得到了这个解决方案，修复了

th

的

宽度，还添加了一个空白
th

<th width="100px">Name</th>
<th width="300px">Amount</th>
<th width="100px">&nbsp;</th>

名称
数量

您可以根据需要修改宽度，这将对您有所帮助。
我刚刚使用CSS
可见性
属性获得了它

这是更新的plunker-

以下是我对css所做的所有修改

tr i.icon-minus-sign {visibility: hidden;}
tr:hover i.icon-minus-sign {visibility: visible;}

只需修复您的css：-

tr i.icon-minus-sign {visibility: hidden;}
tr:hover i.icon-minus-sign {visibility: visible;}

问题是，由于列是
display:none
，所以您的列最初没有任何元素，因此您的其他单元格会扩展以占用空间。当您将鼠标悬停在图元上时，图元将占用空间，收缩的td将展开。为了避免这种情况，最好的办法是使用
可见性
，它会占用元素空间，即使它与
显示
属性
不同，隐藏起来也会占用元素空间。发布此问题后，我尝试了同样的方法，使其正常工作，更新了答案并看到了您的帖子：），感谢@PSL的快速响应我们看到了您的问题，并立即意识到这一定是显示v/s可见性问题：）@daydreamer：您也只能通过编写有效的HTML来解决此问题。：）这是怎么可能的，请注意你的HTML是无效的though@diEcho，请详细说明，我不明白哪里是无效的
在
tbody
之前必须关闭AD
标记请参见：您尚未选择任何答案
tr i.icon-minus-sign {visibility: hidden;}
tr:hover i.icon-minus-sign {visibility: visible;}