悬停在 Div 上时显示字形图标时移动的 Html 表格

Question

当 div 悬停时，我试图在表格行中显示一个字形图标。我能够实现它，但整个表在悬停时有点向左移动。发生这种情况只是因为我使用的样式。

工作代码:https://jsfiddle.net/nvarun123/DTcHh/22806/

html代码:

<div id="container">
<div class="heading">
Section Heading
</div>
<table align="center" >
  <tr>
    <td id="label" align="right">Name:</td>
    <td id="field" align="left"><a >Miachel Jackson<span style="padding-left:8px;padding-right:8px;" class="glyphicon glyphicon-pencil" id="test"></span></a><td>
  </tr>
  <tr>
    <td id="label" align="right">Net Worth:</td>
    <td id="field" align="left">$500 Million</td>
  </tr>
  <tr>
    <td id="label" align="right">Place:</td>
    <td id="field" align="left">Los Angels</td>
  </tr>
</table>

</div>

CSS 代码:

#container{
  border: 1px solid #E3E3E3;
  border-radius:3px;
  background-color:#E3E3E3;
  padding:10px;
  min-width:70%;
}
.heading{
  font-family:sans-serif;
  font-size:18px;
  color:#33434e;
  padding:15px;

}
table{
    border: 1px solid white;
}
tr{
  border:2px solid #E3E3E3;
}
td{
  padding:12px;
  padding-left:8px;
  padding-right:8px;
  padding-top:5px;
  padding-bottom:5px;
}
#label{
  font-family:sans-serif;
  font-size:15px;
  color:#546A79;
  font-weight: bold;
  text-align:right;
}
#field{
  font-family:sans-serif;
  font-size:15px;
  color:#546A79;
  font-weight: normal;
  height:30px;
  padding-left:12px;
  cursor:pointer;
}
#container:hover #field{
  background-color: #E4EBF1;
}
#container:hover #field:hover{
  background-color:#7F96A3;
}
#container #test{
  display:none;
}
#container:hover #test{
  display:inline;
}
#field:hover #test{
  color:white;
}
#field:hover{
  color:#FFF;
}
a{
  color:#546A79;
  text-decoration:none;
}
#field:hover a{
  color:#FFF;
  text-decoration:none;
}

请告诉我哪里出错了。

Answer 1

为了达到预期的结果，使用下面

#container #test{
  visibility:hidden;
}
#container:hover #test{
 visibility:visible;
}

https://jsfiddle.net/Nagasai_Aytha/DTcHh/22810/

display:none，不占用空间，因此当 display:inline 在悬停时可用时，会创建额外的空间来移动表格。
visibility :hidden ,隐藏字形并占据元素空间