htmlcsshtml-tablecss-tables

Make textarea fill table cell

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.