Make textarea fill table cell

Question

I know, there are similar questions on SO, but the answers didn't seem to work for me. My table has got a cell that fills multiple rows, and I want the textarea to fill the whole cell. The code that I've found doesn't work for height.

CSS

textarea {
    width: 100%;
    height: 100%;
    resize: none;
    -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*/
}

Fiddle: https://jsfiddle.net/4nkwhLj5/

Solution

You can make it work by adding position: relative to the td, and position: absolute to the textarea.

This is the fiddle: https://jsfiddle.net/stefarossi/5Lwhg7mb/2/

Hope you can find this useful.

Comments

[eran otzap]

I never understand why this works. could you elaborate why absolute and relative ?

[Soma Zambelly]

I ended up with using a fixed row number in my application, but this does exactly what I wanted.