就地编辑 html 表格单元格 - 输入框大小

Question

我有一个表格，当双击“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();
                        });
         });        

}

CSS：

#eList{
    border-collapse:collapse;   
    min-width:800px;
    font-size:.9em;
}

#eList tr:hover td {
    background:#fffaf0; 
    color: #000;
}

#eList th{
    background:#ddd;
    border:1pt solid #ccc;
    padding:3px;
}

#eList td{
    background:#fff;
    border:1pt solid #ccc;
    padding:3px;
}

.tableInput{
    display: table-cell;
    vertical-align: top;
    width:100%;
}

Answer 1

这些更改可能会起作用：

#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 */
}