Регулировка размера ввода в размере диапазона

Question

У меня есть различные промежутки, которые превращаются в поля ввода, поэтому я могу редактировать их каждый раз, когда я нажимаю определенную кнопку. Моя проблема - это CSS, который изменяет весь макет таблицы.

Как я могу решить эту проблему, поэтому строки таблицы не меняются, а ширина и высота входных коробок такие же, как соответствующие номера диапазона?

Вот моя скрипка:

FIDDLE

Вот HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<table> 
    <tr> 
    <th class="col-xs-6">Name</th> 
    <th class="col-xs-2" >Value</th> 
    </tr> 
    <tr> 
    <td><span id="s1" class="editable-span col-xs-6">John</span> 
    </td> 
    <td> 
     <span id="s2" class="editable-span col-xs-2">2345</span> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <span id="s3" class="editable-span col-xs-2">Dave</span> 
    </td> 
    <td> 
     <span id="s4" class="editable-span col-xs-2">5678</span> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <span id="s5" class="editable-span col-xs-12 col-md-8">Sarah</span> 
    </td> 
    <td><span id="s6" class="editable-span col-xs-2">1987</span></td> 
    </tr> 
</table> 
<button id="edit_properties" class="col-xs-2">Edit</button> 
<button id="unedit_properties" class="col-xs-2">Save</button> 

И JavaScript:

$("#edit_properties").on("click", function() { 
$('.editable-span').replaceWith(function() { 
return $("<input>", { 
    val: $(this).text(), 
    type: "text", 
    id: this.id, 
    class: 'editable-input' 
    }); 
}); 
}); 

$("#unedit_properties").on("click", function() { 
$('.editable-input').replaceWith(function() { 
return $("<span>", { 
    text: this.value, 
    id: this.id, 
    class: 'editable-span' 
    }); 
}); 
}); 

Answer 1

класса "Col-хз-6" отсутствует, когда экономия :

$("#edit_properties").on("click", function() { 
    $('.editable-span').replaceWith(function() { 
    return $("<input>", { 
     val: $(this).text(), 
     type: "text", 
     id: this.id, 
     class: 'editable-input' 
    }); 
    }); 
}); 

$("#unedit_properties").on("click", function() { 
    $('.editable-input').replaceWith(function() { 
    return $("<span>", { 
     text: this.value, 
     id: this.id, 
     class: 'editable-span' 
    }); 
    }); 
}); 

Обновлено скрипка: http://jsfiddle.net/ersamrow/2D9FW/197/

Answer 2

Попробуйте зафиксировать высоту и ширину пролета и ввод ---

span 
{ 
width:100px; 
height:20px; 
padding:2px;} 
input 
{ 
width:100px; 
height:20px; 
padding:2px; 
}