可编辑的自举表“跳跃”

Question

通过双击单元格，我已经制作了一个带有可编辑引导类的表。然而，单元格宽度会自动增长，并使其他列“跳转”，这可能会很烦人。

下面是一个简单的例子，说明了我的问题：

var tbl = $("#tbl");

for(var i = 0; i < 10; ++i) {
     var row = $("<tr/>"),
         cols = [ $("<td/>"), $("<td/>") ],
         input = $("<input/>", {
             type: "text",
             class: "form-control",
         });

    cols[0].text(i);
    cols[1].text(i * 2);

    cols[0].on("dblclick", function() {
        var cell = $(this);

        input.val(cell.text());
        cell.html(input);
    });

    row.append(cols[0]);
    row.append(cols[1]);
    tbl.append(row);
}

小提琴

我怎么才能阻止这一切？

Answer 1

在这里，CSS完成了这个技巧，添加这个css：

th{
    width:200px;
}

如果也需要这样的话：

tr
{
    height:45px;
}

基本上，我们正在修复Height (和Width)的Table Cell。

您还可以通过CSS双击删除Blue Color Selection，

见Fiddle：演示