Resizing a Textarea inside HTML table

Question

I need to have a single column with multiple rows of textarea elements that take up all of the available space in a tables column for each row. I've come to the conclusion that I need to use percentages and on initial page load this works fine, but then when attempting to resize the textarea any wider it causes some weird behavior in Chrome and Firefox.

Both Browsers: The column snaps to a wider size which changes the widths of all other textareas that have not been resized yet.

In Chrome: The textareas can no longer be resized any smaller than first textarea you adjusted and keeps the trend going for all other textareas.

In Firefox: The textareas can be resized smaller than the first textarea which is better but still has the initial hiccup of changing the size of the table's column. I would like this to be the desired behavior but I can't get Chrome to mimic FireFox.

I've included my testing html: jsbin

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
  table, th, td {
    border: 1px solid black;
  }
  td {
    width: auto;
  }
  textarea {
    width: 98%;
    min-height: 74px;
    min-width: 340px;
  }
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Description</th>
    <th>Third</th>
  </tr>
  <tr>
    <td>January</td>
    <td><textarea cols="40" rows="5"></textarea></td>
    <td>Something</td>
  </tr>
  <tr>
    <td>February</td>
    <td><textarea cols="40" rows="5"></textarea></td>
    <td>Something</td>
  </tr>
  <tr>
    <td>March</td>
    <td><textarea cols="40" rows="5"></textarea></td>
    <td>Something</td>
  </tr>
  <tr>
    <td>April</td>
    <td><textarea cols="40" rows="5"></textarea></td>
    <td>Something</td>
  </tr>
  <tr>
    <td>May</td>
    <td><textarea cols="40" rows="5"></textarea></td>
    <td>Something</td>
  </tr>
  <tr>
    <td>June</td>
    <td><textarea cols="40" rows="5"></textarea></td>
    <td>Something</td>
  </tr>
</table>
</body>
</html>

Switch Case Switch Case · Accepted Answer · 2017-08-14T23:27:14

If you make sure that you have a max and min width it will not exceed the sizes e.g.

textarea {
max-width:60% !important;
min-width:30% !important;
}

Use the !important flag to overwrite any other stylesheets that are connected to the page.

Also if you try adding classes or id's to your textarea such as

<textarea id='text-area'></textarea>

And attach styling

#text-area {
max-width: 50% !important;
min-width: 30% !important;
}

I would also remove the cols and rows keywords and see if it will style it

Resizing a Textarea inside HTML table

1 Answers