编辑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 */ 
}