Html Table moving when displaying a glyphicon when hovered on Div - html

Question

I'm trying to display a glyphicon in a table row when a div is hovered. I'm able to implement it but the whole table is moving somewhat left when hovered.
This is happening only because of the styling I used.
The working code: https://jsfiddle.net/nvarun123/DTcHh/22806/
html code:
<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 code:
#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;
}
Please tell me where I'm going wrong.

Answer 1

To achieved expected result, use below
#container #test{
visibility:hidden;
}
#container:hover #test{
visibility:visible;
}
https://jsfiddle.net/Nagasai_Aytha/DTcHh/22810/
display:none, doesn't occupy space , so when display:inline is available on hover, creates extra space which shifts table.
visibility :hidden ,hides the glyphicon and occupies element space