使文本区域填充表格单元格

Posted 2023-03-05

【中文标题】使文本区域填充表格单元格

【英文标题】：Make textarea fill table cell

【发布时间】：2017-07-04 18:29:13

【问题描述】：

我知道，关于 SO 也有类似的问题，但答案似乎对我不起作用。我的表格有一个填充多行的单元格，我希望 textarea 填充整个单元格。我发现的代码不适用于高度。

CSS

textarea 
    width: 100%;
    height: 100%;
    resize: none;
    -webkit-box-sizing: border-box; /* <=ios4, <= android  2.3 */
    -moz-box-sizing: border-box; /* FF1+ */
    box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/

小提琴： https://jsfiddle.net/4nkwhLj5/

【参考方案1】：

您可以通过将 position: relative 添加到 td 并将 position: absolute 添加到 textarea 来使其工作。

这是小提琴： https://jsfiddle.net/stefarossi/5Lwhg7mb/2/

希望你会发现这很有用。

【讨论】：

我不明白为什么会这样。你能详细说明为什么绝对和相对吗？

我最终在我的应用程序中使用了一个固定的行号，但这正是我想要的。

【参考方案2】：

% 高度没有解决方案，您需要使用例如像素大小（例如 300 像素）来精确大小，尽管在这种情况下我会使用行和列：

<textarea cols="15" rows="10"></textarea>

有关列和行大小的更多信息：w3schools

【参考方案3】：

因为您使用的是表格显示，所以 100% 将只占父行。您需要更具体地设置高度并将表格的高度添加到文本区域，在这种情况下

height: 126px

见小提琴https://jsfiddle.net/4nkwhLj5/1/