Как переполнить определенный контент внутри <td>?

Question

Я начинаю с такой ячейки td, как это

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

Я ищу способ стилизовать это так, чтобы оригинальное содержимое было скрыто, поле ввода показывалось и переполнялось вместо изменения размера tdи сохраняя размер td равным только его первоначальному содержанию.

Состояние A, которое у меня сейчас есть, выглядит следующим образом

[123] [45aaaaaaaaaaaaaaa6] [7aaaaaa89]

Я хочу, чтобы состояние B выглядело так

[* поле ввода текста * aaaaaaaaa6] [7aaaaaa89]

Answer 1

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

в стиле определить:

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

Сценарий make, который показывает div при включении (вам нужно включить jquery js ...)

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

Answer 2

Разобрался. Чего я не осознавал, так это того, что элемент с позицией: абсолютный не может иметь значение по умолчанию, равное 0,0, поэтому мне нужно явно установить для левого 0 значение

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

Answer 3

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

Является ли исправление для вашей разметки, но какого именно эффекта вы хотите достичь и что вы пробовали до сих пор?