Question

通过双击单元格，我创建了一个可以编辑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

我该如何防止这种情况？

Answer 1

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

th{
    width:200px;
}

并且，如果需要的话：

tr
{
    height:45px;
}

基本上我们正在修复Height的{{1}}（和Width）。

您也可以通过CSS双击Table Cell

请参阅小提琴：Demo

可编辑的引导表“跳跃”

1 个答案: