Html divに移動したときにグリフコンを表示するとテーブルが移動する

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/

ディスプレイの下に使用します。インラインホバーで提供されて、テーブルを移動させる余分なスペースを作成します。ディスプレイがそうするときはいずれも、スペースを占有しません。
可視性：非表示、グリフィコンを非表示にして要素スペースを占有する