设置 COLS 时的 textarea 最大宽度

Question

看起来 textarea 设置为 100% 时不尊重 css 最大宽度，设置为固定像素时没问题

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

和

max-width: 100%;

或

max-width: 100px;

查看 max-width: 100% 的 sn-p 代码：

.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>

并查看 max-width: 100px 的 sn-p 代码：

.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：它可以工作。

注意我的浏览器是 Firefox ESR 60.3。是firefox的bug吗？

Answer 1

你试过了吗

textarea {
    width: 100%;
}

这对我有用，并且与我在 .table-cell 中设置的任何宽度相匹配

Answer 2

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

一种解决方案是在表格单元格的内容周围放置一个额外的 div，并设置该单元格的宽度。然后 textarea 会尊重它。

.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>

textarea 的最大宽度是视口的宽度，减去主体的边距和单元格中的内边距。当然，您可以根据自己的需要进行调整！