textarea高度不会增加以匹配表格单元格高度

时间:2012-12-27 16:29:25

标签: jquery html css

我有一个textarea,适合称为.question的表格单元格。现在我遇到的问题是,如果表格单元格的高度扩展到增加的高度,则textarea的高度不会增加,从而在顶部表格单元格边框和textarea边框顶部之间留下间隙,并且还会留下间隙在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;

    }

Jquery的:

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>

更新:

我将.question textarea更改为.textAreaQuestion并删除了高度属性的css略有更新:

.textAreaQuestion{
    resize:none;
    font-size:100%;
    display: block; 
    overflow:auto;
}

我认为需要对jquery进行编辑,这样如果表格单元格增加,它会将文本区域的高度增加到与增加表格单元格相同的高度。 (意见)

1 个答案:

答案 0 :(得分:1)

如果您只想再次调用jQuery函数,请尝试将$(".gridBtns").click(setWidth);之类的内容添加到Grid的任何句柄中。

我担心我不确切知道你需要什么,因为信息太多或太少都无法继续。尝试缩小你的问题,把问题放在一个jsfiddle。当你之前问过你的时候,你做了相反的事情。您只是不断添加代码来复制问题。

在旁注中,请停止使用tables进行布局,这是divs的用途。