Question

我需要<textarea>占用<td>

内的所有可用空间

当用户点击表格单元格内部时，<textarea>应显示单元格的完全维度（如Excel电子表格）。

我尝试将<textarea>宽度和高度设置为100％，但这不起作用;尺寸刚刚偏斜，所有表格单元格都会跳跃一点，因为这个单元格在垂直和水平方向都被错误地调整大小。

有办法做到这一点吗？

修改

您可以在此处查看失败的原因：http://jsfiddle.net/4QbMr/6/

（两个单元格应该是相同的大小）

Answer 1

我不知道我是否理解你的问题，但你必须明确配置talbe cell width。像这样：http://jsfiddle.net/4QbMr/8/。现在它将垂直占用所有空间，为了避免这种情况，你必须将表包装在div中。

这是css的代码：

    textarea
{
     width:100%;
    height:100%;
}
table tr td{
    width:100px;
}

HTML

<table border="1">
    <tr>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut lacinia mauris. Morbi condimentum feugiat diam at scelerisque. Nam lobortis placerat semper. Cras odio nisi, commodo ut viverra nec, tempus vitae elit. Suspendisse sodales, mauris at fermentum consectetur, quam odio dapibus nibh, nec porta diam tortor non ipsum. Donec vestibulum justo sit amet ipsum facilisis et accumsan orci convallis. Sed id tempus sem. Donec congue sapien ut nunc pretium sed fringilla orci interdum. Fusce viverra viverra scelerisque. Donec cursus ve
        </td>
        <td>
            <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut lacinia mauris. Morbi condimentum feugiat diam at scelerisque. Nam lobortis placerat semper. Cras odio nisi, commodo ut viverra nec, tempus vitae elit. Suspendisse sodales, mauris at fermentum consectetur, quam odio dapibus nibh, nec porta diam tortor non ipsum. Donec vestibulum justo sit amet ipsum facilisis et accumsan orci convallis. Sed id tempus sem. Donec congue sapien ut nunc pretium sed fringilla orci interdum. Fusce viverra viverra scelerisque. Donec cursus ve</textarea>
        </td>
    </tr>
</table>

Answer 2

首先，给表格单元格position:relative

接下来将CSS中的textarea定义为

textarea {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

jsfiddle：http://jsfiddle.net/xXXBP/

修改

新小提琴：http://jsfiddle.net/xXXBP/8/

现在玩FF和IE很好玩。：d

Answer 3

$('td.makeTA').click(function() {
    var $td = $(this);
    var w = $td.width();
    var h = $td.height();
    $td.append($('<textarea />').css('width',w+'px').css('height',h+'px'));
}

Answer 4

您必须将table，tr和td height设置为您的尺寸，然后将td尺寸设为“ 100 / #rowrow “％（或固定宽度）。

在your updated jsfiddle

中

textarea
{
  width:100%;
  height:100%;  
}

td {width:50%;/*for 2 columns*/}
table, tr, td{height:100%}

强制<textarea>占用所有可用空间</textarea>

4 个答案: