Make <textarea> fill table cell's height

Question

I use the following code to create a table with an image and a <textare> :

<table border="1" style="border-color: #a6a6a6" cellpadding="4" cellspacing="0" width="702">\
  <col width="455">
  <col width="230">\
  <tbody>
    <tr>\
      <td type="image" id="' + sdfsdsdf + '" data-parent-id="0" data-type="NORMAL" data-img="1" data-flags="1" data-type-ios="3" height="85" width="455"><img src="http://www.whichcitytotravel.com/wp-content/uploads/2016/01/Sunset-in-Monaco.jpg" style="width:100%;"></td>\
      <td width="230">
        <pre><textarea id="' + sdfsdfsdaf + '" data-parent-id="' + id_picture + '" data-type="sdfsdafsd" data-type-ios="4" rows="5" style="width:100%; height:100%; display:block;"></textarea></pre><br></td>\
    </tr>
  </tbody>
</table>'

The result looks like this: https://jsfiddle.net/705buxgz/

I'd like the <textarea> to fill all the height available inside the cell of the table.

I tried all the other answers here and none of them worked for me.

Answer 1

This should do the trick: https://jsfiddle.net/cLro4q10/

You have to set the table and pre height. In this case I made it 100%. A child can only be 100% height of its parent if the parents' height has been set.

Answer 2

I don't know if this will work for everyone, and that's because I found it in my CSS. In my Site.css file I found the following:

input,
select,
textarea {
    max-width: 280px;
}

Once I removed it my textarea filled the cell. But once again, that was just because of my CSS. I removed the reference to "textarea" so it looks like

input,
select {
    max-width: 280px;
}

and now it works.