hide and show without resizing the table element
<p><img src="http://i.stack.imgur.com/cTV3F.jpg" alt="comment without flag">
<img src="http://i.stack.imgur.com/eseps.jpg" alt="enter image description here"></p>

<p>if you notice, above are comments in stackoverflow, the above image shows no flag while below image shows the flag shows when the mouse is hovering the comment. The flag is hide/show without resizing the table layout. But I have tried my own way by using below code but it still resizing.</p>

<pre><code>&lt;script&gt;
$('document').ready(function()
{
    $('#hover').hover(function()
    {
        $('#flag').show();
    });
});
</code></pre>

<p></p>

<pre><code>&lt;table&gt;
&lt;tr&gt;
    &lt;td&gt;
        &lt;div id="hover"&gt;

            &lt;div id="flag" style="display:none"&gt;
                &lt;img src="flag.png"/&gt;
            &lt;/div&gt;

            &lt;div&gt;
                Hover me
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p></p>

<p>Help me out here how to resolve this matter. </p>
