Setting the height of a textarea inside a table

- 1 answer

Ad

I've set the height of my textarea to 500%, but for some reason it's not changing to 500%. I think it has something to do with it being inside a table, but I'm not sure what to change set the height correctly. For some reason, the width of the textarea CAN be change inside the table.

table,td {
border: 1px solid black;
}
textarea {
resize: none;
width: 100%;
height: 500%;
}
<table> 
<tr>

<td> 
firstTD 
</td> 

<td>
<form method = 'POST' action = 'updateProfile.php'>
<textarea id = 'textarea' placeholder = 'type something here...' onfocus = \"this.placeholder = ''\" onblur = \"this.placeholder = 'type something here...'\" maxlength = '10000'></textarea>
</form>
</td>

</tr> 
</table>

Ad

Answer

Ad

The other answer solves the problem, but doesn't explain it. When you use % to define width/height in CSS, you are making it whatever% of that element's container' width/height.

When you set your textarea to be 100% of an otherwise empty <td>, it's not going to be very big.

Setting it to posistion:absolute will work IF none the ancestor elements are positioned. A simpler approach would be to just use something other than % to define your width and height. Try width:10em; and adjust it until you get it right.

Edit.

To answer a question in the comments: The reason using % to define the height works in this case, is because the empty cell has a height, but not a width. An empty table cell still inherits the height of the row, which is as tall as the tallest <td>. In this case there is another <td> that has content, giving the cell a height.

So, If there was another row, and one of the cells in the same column had content, then width would work with % too.

That said, it's not a good idea to use % for width and height in a table, because when the content in the table changes, your percentages will change. Also, when you use % as opposed to px or em, it will not stretch the parent container.

Edit again

I honestly didn't even notice the form element. Then your percents are relative to the height/width of the form element, not the <td>. There must be some padding giving your cells width/height but the form wouldn't have any dimensions.

Ad
source: stackoverflow.com
Ad