我需要有一个包含多行 textarea 元素的列，这些元素占用每行的表列中的所有可用空间。我得出的结论是我需要使用百分比，并且在初始页面加载时效果很好，但是当尝试将文本区域调整得更宽时，它会导致 Chrome 和 Firefox 出现一些奇怪的行为。
两种浏览器:列对齐到更宽的大小，这会更改所有其他尚未调整大小的文本区域的宽度。
在 Chrome 中:文本区域的大小不能再调整为小于您调整的第一个文本区域，并保持所有其他文本区域的趋势。
在 Firefox 中:文本区域的大小可以调整得比第一个文本区域小，这更好，但仍然有更改表格列大小的初始问题。我希望这是所需的行为，但我无法让 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>
最佳答案
如果你确定你有最大和最小宽度，它不会超过尺寸，例如
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 - 调整 HTML 表格内文本区域的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45684439/