设置表格内文本区域的高度

Question

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>

Answer 1

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.

Answer 2

Try setting position: absolute to textarea and give a position: relative to the parent. Also remove width and give left and right values as 0 . But remember, this will make the textarea to overflow out of the content. Is that what you are expecting?

 table, td { border: 1px solid black; position: relative; width: 350px; } textarea { resize: none; height: 500%; left: 0; right: 0; position: absolute; top: 0; }

 <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>

Or if you need something like this?

 table, td { border: 1px solid black; position: relative; width: 350px; } textarea { resize: none; height: 10em; width: 100%; display: block; box-sizing: border-box; }

 <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>

Answer 3

With this you can set size for text area

$("textarea").css("height", $("textarea").parent("td").height())
.css("width", $("textarea").parent("td").width())