textarea height does not increase to match table cell height

[jaycswe]

I have a textarea which fits into a table cell known as \[code\].question\[/code\]. Now the problem I am having is that if the table cell's height expands to an increased height, the textarea's height does not increase and thus leaves a gap between the top table cell border and the top of the textarea border and it also leaves a gap in between the textarea's bottom border and the table cell's bottom border.If the table cell's height decreases enough, then it looks like that the textarea has filled the table cell's height.But what my question is that no matter if the table cell's height has been altered, the textarea should fill the table cell's height always. My question is though that how can I alter the css, HTML and jquery below in order to do this?css:\[code\] .question { max-width:0.1%; border:1px black solid; border-collapse:collapse; line-height: 0; } .question textarea { width:auto; resize:none; height:100%; font-size:100%; display: block; overflow:auto; }\[/code\]Jquery:\[code\]function setWidth() { var questionCellHeight = $("#qandatbl_onthefly tbody .question").height(); $(".textAreaQuestion").css({ "height": (questionCellHeight) + "px" });}\[/code\]HTML Table:\[code\]<table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0"><thead><tr> <th class="question">Question</th></tr></thead></table><div id="qandatbl_onthefly_container"><table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0"><tbody><tr class='optionAndAnswer' align='center'><td class='question'><textarea class='textAreaQuestion'></textarea></td></tr></tbody></table>\[/code\]UPDATE:Slight update of css where I changed \[code\].question textarea\[/code\] to \[code\].textAreaQuestion\[/code\] and removed the height attribute:\[code\].textAreaQuestion{ resize:none; font-size:100%; display: block; overflow:auto;}\[/code\]