Question

当设置为100％时，textarea似乎不尊重css max-width，而当设置为固定像素时，则没问题

<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 max-width 100％，我想这是错误的，它应该位于表单元格宽度的300px中。在第二个示例中，textarea保持为100px：有效。

我的浏览器是Firefox ESR 60.3。是Firefox的错误吗？

Answer 1

您尝试过

textarea {
    width: 100%;
}

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

Answer 2

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

一种解决方案是在内容周围的表格单元格中放置一个额外的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>

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

设置COLS时textarea最大宽度

2 个答案: