Question

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

两个浏览器：该列捕捉到更大的尺寸，这会改变尚未调整大小的所有其他textareas的宽度。

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

在Firefox中：textareas的大小可以比第一个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>

Answer 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关键字并查看它是否会设置样式

调整HTML表格中的Textarea大小

1 个答案: