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/

Standfast

Answer 1

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.

Tablet

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

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

Answer 2

Because you are using a table display, the 100% will only account for the parent row. You will need to be more specific on the height setting and add the height of the table to the textarea, in this case

height: 126px

See fiddle https://jsfiddle.net/4nkwhLj5/1/

Wellfavored

Answer 3

There is no solution for the % height, you need to precise the size with for example pixel size (for example 300px) although I would use rows and cols in this situation:

<textarea cols="15" rows="10"></textarea>

For more info about columns and rows size: w3schools

Bulgar

Answer 4

here is a very basic solution wich does not rely on absolute positioning and also allows the table to grow according to the size of the textarea:

the trick is display: block; min-height: 50px; height: 100% on textarea

alternatively you can set rows="4" for example and remove the min-height property from textarea

table {
  border-collapse: collapse;
  border: 2px solid black;
  width: 100%;
}

td {
  padding: 0;
}

textarea {
  display: block;
  width: 100%;
  height: 100%;
  background-color: teal;
  resize: vertical;
  min-height: 50px;
  padding: 0;
}

<table>
  <tr>
    <td>
      <textarea></textarea>
    </td>
    <td>other cell</td>
  </tr>
</table>

Bortman

Answer 5

To make height: 100% work on the element under <td>, you should set height: 1px to the <td> element.

For your Fiddle link, add following css:

td {
  height: 1px;
}

More details to html - How to make fill height - Stack Overflow

What's more, if you want to make textarea's height grow as its content increases, here is another Q&A: html - Is there a way to get a textarea to stretch to fit its content without using PHP or JavaScript? - Stack Overflow

Nightwear