CODEWITHSUNDEEP
html
user1275375
user1275375

Reputation: 1391

Adjust the textArea height and width to fit in <td> of a table

I am displaying the html content in a table. For printing the tags i am using textArea in the <td> of the table. So i want to adjust the height and width of textArea so that it is equal to the <td>. How can i do this

Upvotes: 35

Views: 63537

Answers (4)

unqualified
unqualified

Reputation: 131

When I added "min-width:98%;" it worked. I'm using jquery datatables.

Upvotes: 0

uınbɐɥs
uınbɐɥs

Reputation: 7341

Try using this CSS:

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

Or inline:

<td>
    <textarea style="width: 100%; height: 100%; border: none">
    </textarea>
</td>

Upvotes: 4

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

dabblet.demo
enter image description here

the problem is that textarea behave not normal box-model, that's why we need this trick with box-sizing

this CSS will help you:

textarea {
    border: none;
    width: 100%;
    -webkit-box-sizing: border-box; /* <=iOS4, <= Android  2.3 */
       -moz-box-sizing: border-box; /* FF1+ */
            box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
}

if you have no access to css file, you can use inline css

like this:

<textarea style="border: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"> </textarea>

Upvotes: 52

KiiroSora09
KiiroSora09

Reputation: 2287

give the textarea a 100% width and height style

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

but also take into account the paddings and borders or the textarea so that it would not overflow from the td.

hope this helps.

Upvotes: -2

Related Questions