Force <textarea> to take up all available space - html

Question

I need to have a <textarea> take up all available space inside of a <td>
When a user clicks inside of the table cell, the <textarea> should appear with the exact dimensions of the cell (like an Excel spreadsheet).
I have tried setting the <textarea> width and height to 100%, but that doesn't work; the dimensions just get skewed and all the table cells jump a little bit as this cell get resized incorrectly both vertically and horizontally.
Is there a way to do this?
edit:
You can see how this fails here: http://jsfiddle.net/4QbMr/6/
(both cells should be the same size)

Answer 1

I do not know whether I understand your question but you have to explicitly configure talbe cells width. like this: http://jsfiddle.net/4QbMr/8/. Now it will take all the space vertically, in order to avoid this you have to wrap table in a div.
Here's code of the css:
textarea
{
width:100%;
height:100%;
}
table tr td{
width:100px;
}
html
<table border="1">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut lacinia mauris. Morbi condimentum feugiat diam at scelerisque. Nam lobortis placerat semper. Cras odio nisi, commodo ut viverra nec, tempus vitae elit. Suspendisse sodales, mauris at fermentum consectetur, quam odio dapibus nibh, nec porta diam tortor non ipsum. Donec vestibulum justo sit amet ipsum facilisis et accumsan orci convallis. Sed id tempus sem. Donec congue sapien ut nunc pretium sed fringilla orci interdum. Fusce viverra viverra scelerisque. Donec cursus ve
</td>
<td>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut lacinia mauris. Morbi condimentum feugiat diam at scelerisque. Nam lobortis placerat semper. Cras odio nisi, commodo ut viverra nec, tempus vitae elit. Suspendisse sodales, mauris at fermentum consectetur, quam odio dapibus nibh, nec porta diam tortor non ipsum. Donec vestibulum justo sit amet ipsum facilisis et accumsan orci convallis. Sed id tempus sem. Donec congue sapien ut nunc pretium sed fringilla orci interdum. Fusce viverra viverra scelerisque. Donec cursus ve</textarea>
</td>
</tr>
</table>

Answer 2

First, give the table cells position:relative
Next define textarea in the CSS as
textarea {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
jsfiddle: http://jsfiddle.net/xXXBP/
EDIT
new fiddle: http://jsfiddle.net/xXXBP/8/
Plays nice with FF and IE now. :D

Answer 3

$('td.makeTA').click(function() {
var $td = $(this);
var w = $td.width();
var h = $td.height();
$td.append($('<textarea />').css('width',w+'px').css('height',h+'px'));
}

Answer 4

You'll have to set the table, tr and td height to your size, and then the td size to "100/#ofrow"% (or a fixed width).
like in your updated jsfiddle
textarea
{
width:100%;
height:100%;
}
td {width:50%;/*for 2 columns*/}
table, tr, td{height:100%}