Jquery 在位编辑html表格单元格-输入框大小

我有一个表格，当双击“textEdit”类中的单元格时，它们是可编辑的。这是可行的，除非用输入框替换单元格内容，否则会调整整个单元格的大小，这很难看

我见过网格这样做，但它们不会调整单元格的大小。怎么做

js：

function loadEmpList(){ 
        var tbl="<table id='eList'>";
        tbl+="<tr>";
        tbl+="<th>ID</th>";
        tbl+="<th>user ID</th>";
        tbl+="<th>user PW</th>";
        tbl+="<th>account type</th>";
        tbl+="<th>name</th>";
        tbl+="<th>email</th>";
        tbl+="<th>action</th>";
        tbl+="</tr>";
        tbl+="</table>"

        $("#empList").html(tbl);

        var data=loadEmp(); // load from database

      var newRow;   
        for(var i=1;i<=data.length;i++){
                // record id, user, pw, type, email action
                newRow="<tr>";
                newRow+="<td>"+data[i-1][0]+"</td>";
                newRow+="<td class='textEdit'>"+data[i-1][1]+"</td>";
                newRow+="<td class='textEdit'>"+data[i-1][2]+"</td>";
                newRow+="<td>"+data[i-1][3]+"</td>";
                newRow+="<td class='textEdit'>"+data[i-1][4]+"</td>";
                newRow+="<td class='textEdit'>"+data[i-1][5]+"</td>";
                newRow+="<td><button>del</button></td>";
                newRow+="</tr>";

                $('#eList tr:last').after(newRow);
        }

        $('td.textEdit').dblclick(
                function(){
                    var text = $(this).text();
                    $(this).text('');
                    $('<input type="text" class="tableInput">').appendTo($(this)).val(text).select().blur(
                        function(){
                            var newText = $(this).val();
                            $(this).parent().text(newText),find('input:text').remove();
                        });
         });        

}

---

这些变化可能会起作用：

#eList td{
    background:#fff;
    border:1pt solid #ccc;
    padding:3px;
    position: relative; 
    /* an absolutely positioned element must have a positioned parent */
}

.tableInput{
    display: table-cell;
    vertical-align: top;
    width: 500px;
    position: absolute; /* position absolutely */
    top: 0; /* align at 0,0 within the cell */
    left: 0;
    z-index: 999; /* place in front of the rest of the stack */
}

---

差不多了。第一个可编辑的单元格可以工作，但我有一个不可编辑的单元格，这似乎把其余的都抛了出去。我把它放在一个名为“staticCell”的类中。staticCell{display:table cell；}但这不起作用。我也改变了。tableInput宽度和高度分别为97%和80%，效果很好

#eList td{
    background:#fff;
    border:1pt solid #ccc;
    padding:3px;
    position: relative; 
    /* an absolutely positioned element must have a positioned parent */
}

.tableInput{
    display: table-cell;
    vertical-align: top;
    width: 500px;
    position: absolute; /* position absolutely */
    top: 0; /* align at 0,0 within the cell */
    left: 0;
    z-index: 999; /* place in front of the rest of the stack */
}