使文本区域填充 table 单元格

Question

我知道，SO 上也有类似的问题，但答案似乎对我不起作用。我的 table 有一个填充多行的单元格，我希望文本区域填充整个单元格。我找到的代码不适用于身高。

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*/
}

Fiddle: https://jsfiddle.net/4nkwhLj5/

Answer 1

因为您使用的是 table 显示，所以 100% 只会占父行。您需要更具体地设置高度并将 table 的高度添加到文本区域，在本例中为

height: 126px

见fiddlehttps://jsfiddle.net/4nkwhLj5/1/

Answer 2

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

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

有关列和行大小的详细信息：w3schools

Answer 3

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

这是 fiddle： https://jsfiddle.net/stefarossi/5Lwhg7mb/2/

希望你能发现这个有用。

使文本区域填充 table 单元格

Make textarea fill table cell

html

css

html-table

css-tables