我有一个文本区域,它适合一个名为 .question
的表格单元格。现在我遇到的问题是,如果表格单元格的高度扩展到增加的高度,textarea 的高度不会增加,因此在顶部表格单元格边框和 textarea 边框顶部之间留下一个间隙,它也会在在文本区域的底部边框和表格单元格的底部边框之间。
如果表格单元格的高度降低得足够多,那么看起来文本区域已经填满了表格单元格的高度。
但我的问题是,无论表格单元格的高度是否已更改,textarea 都应始终填充表格单元格的高度。我的问题是如何更改下面的 css、HTML 和 jquery 以执行此操作?
CSS:
.question {
max-width:0.1%;
border:1px black solid;
border-collapse:collapse;
line-height: 0;
}
.question textarea {
width:auto;
resize:none;
height:100%;
font-size:100%;
display: block;
overflow:auto;
}
J查询:
function setWidth() {
var questionCellHeight = $("#qandatbl_onthefly tbody .question").height();
$(".textAreaQuestion").css({
"height": (questionCellHeight) + "px"
});
}
HTML 表格:
<table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th class="question">Question</th>
</tr>
</thead>
</table>
<div id="qandatbl_onthefly_container">
<table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr class='optionAndAnswer' align='center'>
<td class='question'>
<textarea class='textAreaQuestion'></textarea>
</td>
</tr>
</tbody>
</table>
更新:
css 的轻微更新,我将 .question textarea
更改为 .textAreaQuestion
并删除了高度属性:
.textAreaQuestion{
resize:none;
font-size:100%;
display: block;
overflow:auto;
}
我相信需要编辑 jquery,以便如果表格单元格增加,它会将文本区域的高度增加到与增加表格单元格相同的高度。 (意见)
最佳答案
如果您只想再次调用 jQuery 函数,请尝试向处理网格的任何内容添加类似 $(".gridBtns").click(setWidth);
的内容。
恐怕我不确切知道您需要什么,因为信息太多或太少无法继续。尝试缩小问题范围并将问题放在 jsfiddle 中。之前问你的时候,你反其道而行之。您只是不断添加代码来重现您的问题。
附带说明一下,请停止使用 tables
进行布局,这就是 divs
的作用。
关于jquery - textarea 高度不会增加以匹配表格单元格高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14057855/