Question

这是plunker - http://plnkr.co/edit/iwvjJcUurUW2AvkDArfz?p=preview

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

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

我如何实现这一目标？

谢谢

Answer 1

修复你的CSS： -

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

问题是你有一个没有任何元素的列，因为它是display:none因此你的其他单元扩展占用空间。当你将鼠标悬停在元素上占据空间并缩小td的范围时。为了避免这种最好的事情，使用visibility即使隐藏了display属性

，它也会占用元素空间

Answer 2

再添加一个th和

<th>&nbsp;</th>

提示：为所有列指定宽度，并关闭</thead>

<table class="table table-hover" style="width:100%">
  <thead>
    <tr>
       <th style="width:60%" >Name</th>
       <th style="width:30%">Amount</th>
       <th style="width:10%">&nbsp;</th>
    </tr>
  </thead>

Working Fiddle

Answer 3

我在此处得到的解决方案是修复了width的{{1}}并添加了一个空白th

th

您可以根据需要修改宽度，这对您有帮助。

Answer 4

我刚刚使用CSS visibility属性

这是更新的plunker - http://plnkr.co/edit/iwvjJcUurUW2AvkDArfz?p=preview

以下是我的css所做的一切

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

CSS：表格列移动为图标切换悬停时的可见性

4 个答案: