可编辑的引导表“跳跃”

【问题标题】：Editable Bootstrap Table "Jumping"可编辑的引导表“跳跃”
【发布时间】：2014-02-25 12:07:46
【问题描述】：

我通过双击单元格创建了一个带有 Bootstrap 类的表格。然而，单元格宽度会自动增长，并使其他列“跳跃”，这可能很烦人。

这是一个演示我的问题的粗略示例：

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);
}

jsfiddle

如何防止这种情况发生？

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

这里CSS 可以解决问题，添加这个css：

th{
    width:200px;
}

如果也需要的话：

tr
{
    height:45px;
}

基本上我们正在修复Table Cell 的Height（和Width）。

您也可以通过 CSS 将 Double Click 上的 Blue Color Selection 删除，

见小提琴：Demo

【讨论】：