Html Tabelle, die sich bewegt, wenn ein Glyphicon angezeigt wird, wenn es auf Div

Question

ist Ich versuche, ein Glyphicon in einer Tabellenzeile anzuzeigen, wenn ein Div schwebt. Ich kann es implementieren, aber der ganze Tisch bewegt sich etwas nach links, wenn er schwebt. Das passiert nur wegen des verwendeten Stylings.

Der Arbeitscode: 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; 
} 

Bitte mir sagen, wo ich falsch gehe.

Answer 1

Um erreicht erwartetes Ergebnis, verwenden Sie unter

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

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

display: none, nicht Raum einnehmen, so dass, wenn display: inline auf schweben verfügbar ist, schafft zusätzlichen Raum, den Tisch verschiebt.
Sichtbarkeit: versteckt, die glyphicon versteckt und nimmt Element Raum