HTML表格以一行呈现答案

【问题标题】：HTML table is rendered in one lineHTML表格以一行呈现
【发布时间】：2018-07-23 18:43:59
【问题描述】：

我正在尝试使用用户脚本动态生成表格。

    var divWrap = document.createElement('div');
        divWrap.style.fontFamily = "sans-serif";
        divWrap.style.width = "100%";
    var spanTitle = document.createElement('span');
        spanTitle.style.marginRight = "auto";
        spanTitle.style.marginLeft = "auto";
        spanTitle.style.fontSize = "1.5em";
        spanTitle.innerHTML = "Countdown";
        divWrap.appendChild(spanTitle);
    var createTable = document.createElement('table');
        createTable.style.marginLeft = "auto";
        createTable.style.marginRight = "auto";
        createTable.style.width = "50%";
        createTable.id = "cdn_table"
        divWrap.appendChild(createTable);
    createTable.appendChild(addRow("test", "12d"));
    createTable.appendChild(addRow("test2", "24h"));
    mainDiv.getElementsByTagName('span')[0].appendChild(divWrap);

function addRow(rName, rValue) {
    console.log(rName + ": " + rValue);
    var row = document.createElement('tr');
    var tName = document.createElement('td');
    tName.innerHTML = rName;
    var tValue = document.createElement('td');
    tValue.innerHTML = rValue;
    row.appendChild(tName);
    row.appendChild(tValue);
    return row;
}

问题是所有元素都像这样呈现在一行中：http://i.imgur.com/MjMtdDg.png

我缺少一些 css 值吗？或者是其他东西？我想在 Firefox 中使用 Scriptish 在该缩略图中插入简单的标题和表格..

【问题讨论】：

标签： javascript css html-table scriptish

【解决方案1】：

表格有自己的界面用于添加行/单元格。

var t = document.createElement("table");
var r = t.insertRow(-1);
var c = r.insertCell(-1);
c.innerHTML = "Foo";
c = r.insertCell(-1);
c.innerHTML = "Bar";

document.body.appendChild(t);

http://jsfiddle.net/tQWm8/1/

【讨论】：

也许使用appendChild(document.createTextNode(...)) 而不是.innerHTML=...。示例代码应该使用最不容易出错的方法来完成任务。
innerHTML 是如何引起任何问题的？ innerText 不是一直跨浏览器的。
如果人们养成了使用 innerHTML 插入文本节点的习惯，那么他们就会将它与不受信任的数据或包含 HTML 特殊字符的纯文本一起使用。