Как сделать ввод текста в ячейку таблицы за пределы таблицы, если она выбрана?

Question

У меня есть стол с тремя колонками. A label, селектор выпадающего списка и поле ввода.

Предполагается, что поле ввода содержит несколько строк содержимого (в частности, JSON), но я не хочу, чтобы каждая строка таблицы была высокой. Вместо этого я хочу, чтобы, когда пользователь нажимает на эту ячейку, область содержимого должна расти и перетекать через границы таблицы. Когда он размывает фокус, он должен уменьшаться до размера.

Вот такой JSFiddle я использую экспериментировать: http://jsfiddle.net/xq704y5j/1/

Любые идеи о том, как сделать это просто в HTML, CSS? Я также использую Bootstrap уже

Answer 1

Смотреть это fiddle example

Я добавил этот CSS:

table{ 
    position:relative; 
} 
#sibiling-name1:focus{ 
    position:absolute; 
    width:100%; 
    left:0; 
} 

Хотелось бы надеяться, что поможет вам возглавляемую в направлении, куда вы хотите идти. -Ted

Отредактировано для добавления: См. this fiddle для использования текстового поля вместо ввода текста.