Javascript 表格中的输入导致表格宽度更改

因此，这里有一个表，我可以在其中为各个列添加、删除和编辑新数据

    <table class="table table-borderless table-responsive">
        <thead>
            <tr class="head">
                <th>Set</th>
                <th>Reps</th>
                <th></th>
            </tr>
        </thead>
        <tbody class="" id="body">
            <tr>
                <td>1</td>
                <td>12</td>
                <td>
                    <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
                    <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                    <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>12</td>
                <td>
                    <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>
                    <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                    <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                </td>
            </tr>

        </tbody>
    </table>

    <button id="add_button" type="button" class="btn btn-primary add-new"><i class="fa fa-plus"></i> Add Set</button>

我的问题是，在尝试添加或编辑现有数据时，如何使宽度保持不变而不发生变化

此处的工作片段：

具有添加和删除行功能的引导表
身体{
颜色：#404E67；
背景#F5F7FA；
字体系列：“开放式Sans”，无衬线；
}
.表格包装{
宽度：580px；
保证金：30像素自动；
背景：透明；
填充：20px；
边框样式：实心；
高度：500px；
}
.表格标题{
垫底：10px；
利润率：0.10px；
}
.表格标题h2{
边际：6px0；
字体大小：22px；
}
桌子{
左边距：；
}
table.table tr th，table.table tr td{
边框颜色：#e9e9e9；
}
表一{
字体大小：13px；
利润率：0.5px；
光标：指针；
}
表th：最后一个孩子{
宽度：100px；
}
表.表td a{
光标：指针；
显示：内联块；
利润率：0.5px；
最小宽度：24px；
}
表.表td a.add{
颜色：#27C46B；
}
table.table td a.edit{
颜色：#FFC107；
}
table.table td a.delete{
颜色：#E34724；
}
表一{
字号：19px；
}
表.表td a.add i{
字体大小：24px；
右边距：-1px；
位置：相对位置；
顶部：3px；
}
table.table.form控件{
高度：32px；
线高：32px；
盒影：无；
边界半径：2px；
}
table.table.form-control.error{
边框颜色：#f50000；
}
table.table td.add{
显示：无；
}
表th{
宽度：自动！重要；
颜色：白色；
文本对齐：居中；
垂直对齐：中间对齐；
}
运输署{
颜色：白色；
文本对齐：居中；
垂直对齐：中间对齐；
}
.头{
背景色：#4D4F5C；
底部边框：3倍纯白；
}
#身体{
背景色：#4D4F5C；
}
#添加按钮{
}
h4{
文本对齐：居中；
}
$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
var actions=$（“表td:last child”）.html（）；
//在“添加新”按钮上使用“添加行”窗体追加表单击
$（“.add new”）。单击（函数（）{
$（此）.attr（“已禁用”、“已禁用”）；
var index=$（“表tbody tr:last child”）.index（）；
变量行=“”+
'' +
'' +
''+行动+''中+
'';
$（“表格”）。追加（第行）；
$（“table tbody tr”）.eq（索引+1）.find（“.add，.edit”）.toggle（）；
$（'[data toggle=“tooltip”]'）。tooltip（）；
});
//单击“添加”按钮上的“添加行”
$（文档）。在（“单击“，”.add“，函数（）上）{
var empty=false；
var input=$（this.parents（“tr”）.find（'input[type=“text”]”）；
input.each（函数（）{
if（！$（this.val（））{
$（this.addClass（“错误”）；
空=真；
}否则{
$（此）.removeClass（“错误”）；
}
});
$（this.parents（“tr”）.find（“.error”）.first（）.focus（）；
如果（！空）{
input.each（函数（）{
$（this.parent（“td”）.html（$（this.val（））；
});
$（this.parents（“tr”）.find（“.add.edit”）.toggle（）；
$（“.add new”）.removeAttr（“禁用”）；
}
});
//单击“编辑”按钮上的“编辑行”
$（文档）。在（“单击“，”.edit“，函数（）上）{
$（this）.parents（“tr”）.find（“td:not（：last child）”）.each（function（）{
$（this.html（“”）；
});
$（this.parents（“tr”）.find（“.add.edit”）.toggle（）；
$（“.add new”）.attr（“已禁用”、“已禁用”）；
});
//单击“删除”按钮删除行
$（文档）。在（“单击“，”.delete“，函数（）上）{
$（this.parents（“tr”）.remove（）；
$（“.add new”）.removeAttr（“禁用”）；
});
});
AB推出
设置
代表
1.
12
；
；
；
2.
12
；
；
；
添加集

您可以将单元格设置为

位置：相对

，然后将输入设置为

位置：绝对

，然后可以相应地调整其宽度

我已经将输入的宽度设置为单元格的宽度（不包括填充）

具有添加和删除行功能的引导表
身体{
颜色：#404E67；
背景#F5F7FA；
字体系列：“开放式Sans”，无衬线；
}
.表格包装{
宽度：580px；
保证金：30像素自动；
背景：透明；
填充：20px；
边框样式：实心；
高度：500px；
}
.表格标题{
垫底：10px；
利润率：0.10px；
}
.表格标题h2{
边际：6px0；
字体大小：22px；
}
桌子{
左边距：；
}
table.table tr th，table.table tr td{
边框颜色：#e9e9e9；
位置：相对位置；
}
表一{
字体大小：13px；
利润率：0.5px；
光标：指针；
}
表th：最后一个孩子{
宽度：100px；
}
表.表td a{
光标：指针；
显示：内联块；
利润率：0.5px；
最小宽度：24px；
}
表.表td a.add{
颜色：#27C46B；
}
table.table td a.edit{
颜色：#FFC107；
}
table.table td a.delete{
颜色：#E34724；
}
桌子
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();

// Append table with add row form on add new button click
$(".add-new").click(function(){
    $(this).attr("disabled", "disabled");
    var index = $("table tbody tr:last-child").index();
    var row = '<tr>' +
        '<td><input type="text" class="form-control w-25" name="name" id="name"></td>' +
        '<td><input type="text" class="form-control w-25" name="department" id="department"></td>' +
        '<td>' + actions + '</td>' +
    '</tr>';
    $("table").append(row);
    $("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
    $('[data-toggle="tooltip"]').tooltip();
});

// Add row on add button click
$(document).on("click", ".add", function(){
    var empty = false;
    var input = $(this).parents("tr").find('input[type="text"]');
    input.each(function(){
        if(!$(this).val()){
            $(this).addClass("error");
            empty = true;
        } else{
            $(this).removeClass("error");
        }
    });
    $(this).parents("tr").find(".error").first().focus();
    if(!empty){
        input.each(function(){
            $(this).parent("td").html($(this).val());
        });
        $(this).parents("tr").find(".add, .edit").toggle();
        $(".add-new").removeAttr("disabled");
    }
});

// Edit row on edit button click
$(document).on("click", ".edit", function(){
    $(this).parents("tr").find("td:not(:last-child)").each(function(){
        $(this).html('<input type="text" class="form-control w-2" value="' + $(this).text() + '">');
    });
    $(this).parents("tr").find(".add, .edit").toggle();
    $(".add-new").attr("disabled", "disabled");
});

// Delete row on delete button click
$(document).on("click", ".delete", function(){
    $(this).parents("tr").remove();
    $(".add-new").removeAttr("disabled");
});