How to overflow specific content inside an <td>?

I start with a td cell like this

<td>
<span>123</span>
<input style="display:none;">
&l开发者_C百科t;/td>

I'm looking for a way to style this so that the orignal content is hidden, the input box is shown and overflowing instead of resizing the td, and keeping the td sized to just its original content.

State A, which I have now, looks like this

[123][45aaaaaaaaaaaaaaa6][7aaaaaa89]

I want state B to look like this

[*input text field*aaaaaaaaa6][7aaaaaa89]

---

<td>
<span>123</span>
<input style="display:none;">
</td>

Is the correction for your markup, but what exactly is the effect you want to achieve and what have you tried so far?

---

<td>
<span>123</span>
<div id="hidden">
<input type="text" />
</div>
</td>

in style define :

#hidden{
 display:none;
 position:absolute;
 margin:.5em;
}

make script that shows the div on over (you will need to include jquery js ...)

<script type="text/javascript">
  $(document).ready(function(){
    $('table tr td').children().find('div').hover(function(){
       $(this).show();
     }
    )
  });
</script>

---

Figured it out. What I did not realize is that an element with position:absolute cannot be assumed to be defaulting to a 0,0 position, so I need to set the Left to 0 explicitly

<td>
 <div style="position: relative;">
  <span style="visibility:hidden;">123</span>
  <input style="position: absolute; left:0; display:inline;">
 </div>
</td>