调整 HTML 表格内的 Textarea 的大小答案

【问题标题】：Resizing a Textarea inside HTML table调整 HTML 表格内的 Textarea 的大小
【发布时间】：2023-03-10 09:58:01
【问题描述】：

我需要一个包含多行 textarea 元素的列，这些元素占据每行表列中的所有可用空间。我得出的结论是，我需要使用百分比，并且在初始页面加载时效果很好，但是当尝试将 textarea 调整得更宽时，它会在 Chrome 和 Firefox 中引起一些奇怪的行为。

两个浏览器：列对齐到更宽的大小，这会改变所有其他尚未调整大小的文本区域的宽度。

在 Chrome 中：textareas 的大小不能再调整为小于您调整的第一个 textarea 的大小，并保持所有其他 textarea 的趋势。

在 Firefox 中：可以将 textarea 的大小调整为小于第一个 textarea 的大小，这更好，但在更改表格列的大小时仍然存在初始问题。我希望这是理想的行为，但我无法让 Chrome 模仿 FireFox。

我已经包含了我的测试 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>

【问题讨论】：

标签： html css html-table textarea

【解决方案1】：

如果你确保你有一个最大和最小宽度，它不会超过尺寸，例如

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

使用!important 标志覆盖连接到页面的任何其他样式表。

此外，如果您尝试将类或 ID 添加到您的文本区域，例如

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

并附加样式

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

我还会删除 cols 和 rows 关键字，看看它是否会设置样式

【讨论】：

这并没有解决我的问题，我需要文本区域来最初占用表格单元格中的所有可用空间。在它占用这个空间之后，我希望在不影响同一列中其他 textarea 的宽度的情况下调整 textarea 的大小。
您必须为每个文本区域分配一个类或一个 ID，然后单独设置它们的样式，因为它会从您的文本区域样式中显示样式