Редактирование html таблицы ячейки на месте - размер входного окна

Question

У меня есть таблица, когда ячейка в классе «textEdit» двойным щелчком, они доступны для редактирования. Это работает, за исключением случаев, когда содержимое ячейки заменяется полем ввода, оно изменяет размеры всей ячейки, и это уродливо.

Я видел, что сетки делают это, но они не изменяют размер ячейки. Как?

в ЯШ:

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