Way to make textarea fill entire cell in a table

I have designed this table for reporters to browse information about their reports in the database, and the textareas at the top function as both search fields and table heads -- which show what is in each column.

However, a problem I have run into is that when the table shifts dimensions because of content, the textareas (obviously) do not shift along with them.

My question is this; is there a way to force the textarea take up the entire area of the cell they are in?

How to make textarea 100% width?

The idea is to create a div with the class name “wrapper”. Inside that <div> element, we create a text area with a certain number of columns and rows. In this case, it is 30 and 15 respectively. After that, we set the width property to 100% to make a textarea width 100%.

How do I restrict textarea size?

In some cases, there is a need of putting a limit on the size of characters that can be typed in a textarea. So in that case, we can use maxlength attribute to control the number of characters entered in a textarea.

Try: