Geek Answers Handbook

Force <textarea> take all the free space

I need to <textarea>take up all the free space inside<td>

When a user clicks inside a table cell, it <textarea>should be displayed using the exact cell size (for example, an Excel spreadsheet).

I tried to set the width and height <textarea>to 100%, but this does not work; the sizes are simply distorted, and all the cells in the table skip a bit, since this cell does not change correctly both vertically and horizontally.

Is there any way to do this?

change

You can see how this happens here: http://jsfiddle.net/4QbMr/6/

(both cells must be the same size)

+5
source share
4 answers

I don’t know if I understand your question, but you need to explicitly adjust the width of the talbe cells. for example: http://jsfiddle.net/4QbMr/8/ . Now it will take up all the space vertically, to avoid this, you need to wrap the table in a div.

Here's the css code:

    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>
+5
source

First give the table cells position:relative

Next, define textareain 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/

Reproduced with FF and IE .: D

+5
source 
$('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'));
}
+2

You will need to set table, trand td heightto your size, and then the size tdis " 100 / # ofrow "% (or fixed width).

as in updated jsfiddle

textarea
{
  width:100%;
  height:100%;  
}

td {width:50%;/*for 2 columns*/}
table, tr, td{height:100%}
+1
source

More articles:


All Articles