为什么这个细胞出现在我的桌子外？

Question

我正在使用Javascript向我的HTML表添加一个输入元素：

    var nameCell = row.insertCell(0);
    nameCell.innerHTML = data[i].Title;
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    if (data[i].COMPLETED == true) {
        checkbox.checked = true;
    } else {
        checkbox.checked = false;
    };
    row.appendChild(checkbox);

但输入显示在表格之外：

我该如何解决这个问题？

请注意，该复选框确实是行的一部分，我以灰色突出显示。我唯一的问题是行线没有延伸到行的整个宽度。

Answer 1

您尝试将复选框附加到行而不是单元格。

因此，它是细胞的兄弟姐妹。

单元格在行中占据正常位置，这意味着必须扩展行以允许将单元格放在单元格旁边。

Answer 2

您必须将输入添加到行的最后一个td：

var nameCell = row.insertCell(0);
nameCell.innerHTML = data[i].Title;
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
if (data[i].COMPLETED == true) {
    checkbox.checked = true;
} else {
    checkbox.checked = false;
};
var cells = row.getElementsByTagName("td");
var lastcell = cells[cells.length -1];
row.appendChild(checkbox);

Answer 3

表中的容器是表格单元格，而不是表格行。将它放在行内，HTML表将无法正确呈现它。将它放在表格单元格中，它将按照格式显示。

Bootstrap’s grid system, and most of layout system使用一系列容器，行和列来布局和对齐内容。这些容器，行和列是通过css类通过div，span，nav等元素创建的。它不使用HTML表格进行网格系统布局。因此，当未添加到表格单元格时，它将无法在结构上正确放置您的复选框以进行可视化渲染。

如果要使用HTML表格进行设计，请使用colspan。对表格和单元格应用适当的宽度，并将复选框附加到表格单元格。

在一行中，您可以追加容器单元格。但是你不应该将另一个元素追加到一个具有自己的可视化表示的行。如果附加到表行，在渲染时，浏览器将不知道将它放在表格边界内的位置。

"Row groups convey additional structural information and may be rendered by user agents in ways that emphasize this structure"