text设置COLS时的区域最大宽度

Question

当设置为100%时，文本区域似乎不尊重css最大宽度，当设置为固定像素时也可以

<textarea cols="80">text here</textarea>

和

max-width: 100%;

或

max-width: 100px;

请参阅代码段中的最大宽度：100%:

.table {
width: 100%;
display:table;
}
.table-cell {
display: table-cell;
padding: 10px;
width: 300px;
background: #DAC082;
}
textarea {
max-width: 100%;
}

<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>

并查看最大宽度为100px的代码片段：

.table {
width: 100%;
display:table;
}
.table-cell {
display: table-cell;
padding: 10px;
width: 300px;
background: #DAC082;
}
textarea {
max-width: 100px;
}

<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>

注意，在第一个例子中，textarea覆盖了css最大宽度100%，我认为这是错误的，它应该是表单元格宽度的300px。在第二个例子中，textarea停留在100px：它有效。

N。B.我的浏览器是Firefox ESR 60.3。是萤火虫吗？

Answer 1

你试过吗

textarea {
width: 100%;
}

这对我有效，与我在表格单元格中设置的宽度相匹配

Answer 2

表格单元格倾向于将其width属性视为提示，而不是一成不变。

一种解决方案是在内容周围的表单元格中放置一个额外的div，并设置该div的宽度。然后文本区域将向其致敬。

.table {
width: 100%;
}
.table-cell {
display: table-cell;
padding: 10px;
background: #DAC082;
}
.table-cell>div {
width: 300px;
}
textarea {
max-width: 100%;
}

<div class="table">
<div class="table-cell">
<div>
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
</div>

更新：在你想要什么变得更清楚之后，一个新的解决方案如下：不要将宽度属性分配给表，而是将它们分配给内容；那么该表将根据其内容来塑造自己，而不是相反。

.table {
display: table;
}
.table-cell {
display: table-cell;
padding: 10px;
background: #DAC082;
}
textarea {
max-width: calc(100vw - 16px - 20px); /* = viewport - body margin - cell padding */
}

<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>

文本区域的最大宽度是视口的宽度，减去正文的边距和单元格中的填充。当然，你可以根据自己的需要进行调整！