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

Question

我需要让<textarea>充满一个<td>单元格，当用户点击单元格时，<textarea>应该出现并且具有与单元格完全相同的尺寸（就像Excel电子表格）。我已经尝试将<textarea>的宽度和高度设置为100％，但是这不起作用。因为它会导致尺寸失衡并且所有单元格都会随之上下移动，从而使此单元格无法正确地在垂直和水平方向上重新调整大小。是否有一种方法可以做到这一点？你可以看到此失败的示例： http://jsfiddle.net/4QbMr/6/（两个单元格应该具有相同的大小）

- Jesse

---

老实说，我会尝试使用类似JavaScript的东西来实现这个。 - Howdy_McGee

我正在使用jQuery来替换单元格中的文本为<textarea>。我只是无法弄清如何使其大小适合单元格的确切尺寸。 - Jesse

Answer 1

我不知道我是否理解了你的问题，但是你需要明确地配置表格单元格的宽度。像这样：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>

- user194076

---

如果你明确设置<td>的宽度并让高度自适应内容，似乎可以工作，看起来我只能这样做了。 - Jesse

请查看用户@kei的答案，他的方法似乎更好。 - user194076

高度在IE/FF5中不会自动调整大小:D - Kraz

Answer 2

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

然后，在CSS中定义textarea为：

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

JSFiddle: http://jsfiddle.net/xXXBP/

---

编辑

新的 JSFiddle: http://jsfiddle.net/xXXBP/8/

现在在 Firefox 和 IE 中表现良好。 :D

- kei

---

嗯嗯，没错。在IE上也失败了。回到起点重新设计吧 :D - kei

这似乎有点不太正规。我认为简单地指定<td>宽度是一个更稳定/实用的方法。抱歉！ - Jesse

没问题。我在想出解决方案时没有考虑浏览器兼容性。 - kei

K..解决了IE和FF相关问题。 - kei

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'));
}

- LastCoder

---

我也尝试过这个，但它和将宽度和高度设置为100%一样失败。 - Jesse

Answer 4

你需要将 table、tr 和 td 的 height 设为你的尺寸，然后将 td 的尺寸设为 "100/#ofrow"%（或固定宽度），就像在你更新的 jsfiddle中一样。

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

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

- Kraz