javascript - 将整个表格置于其外部 div 的中心

Question

我有一个 div:

<div id="tableContainer">
</div>

我正在使用 jQuery 向其中动态添加一个表:

$(document).ready(function () {

    var data = '[{"gameid":"1","gamename":"Halo","gamedescription":"Game about aliens","gamegenre":"FPS"},{"gameid":"2","gamename":"Halo 2","gamedescription":"Game about aliens 2","gamegenre":"FPS"}]';

    var json = $.parseJSON(data);

    $("#tableContainer").append("<table>");
    $("#tableContainer").append("<tr>");
    $("#tableContainer").append("<td>Game ID</td>");
    $("#tableContainer").append("<td>Game Name</td>");
    $("#tableContainer").append("<td>Game Description</td>");
    $("#tableContainer").append("<td>Game Genre</td>");
    $("#tableContainer").append("</tr>");
    $.each(json, function (index, value) {
        $("#tableContainer").append("<tr>");
        console.log(value.gameid);
        $("#tableContainer").append("<td>" + value.gameid + "</td>");
        $("#tableContainer").append("<td>" + value.gamename + "</td>");
        $("#tableContainer").append("<td>" + value.gamedescription + "</td>");
        $("#tableContainer").append("<td>" + value.gamegenre + "</td>");
        $("#tableContainer").append("</tr>");
    });
    $("#tableContainer").append("</table>");
});

我想水平居中这个整个表格。我正在尝试使用

#tableContainer {
    text-align: center;
    width: 100%;
}
#table {
    margin: 0 auto;
}

但没有成功。有任何想法吗？这是一个 fiddle :

http://jsfiddle.net/bn52jk8k/11/

谢谢

Answer 1

像这样修改代码

$(document).ready(function () {

    var data = '[{"gameid":"1","gamename":"Halo","gamedescription":"Game about aliens","gamegenre":"FPS"},{"gameid":"2","gamename":"Halo 2","gamedescription":"Game about aliens 2","gamegenre":"FPS"}]';

    var json = $.parseJSON(data);

    var table="<table>"
    +   "<tr>"
    +   "<td>Game ID</td>"
    +   "<td>Game Name</td>"
    +   "<td>Game Description</td>"
    +   "<td>Game Genre</td>"
    +   "</tr>";

    $.each(json, function (index, value) {
      table+="<tr>"
        +   "<td>" + value.gameid + "</td>"
        +   "<td>" + value.gamename + "</td>"
        +   "<td>" + value.gamedescription + "</td>"
        +   "<td>" + value.gamegenre + "</td>"
        +   "</tr>";
    });
    table+="</table>";

    $("#tableContainer").append(table);
});

在 CSS 中，

#tableContainer table {
    margin: 0 auto;
}

这是 fiddle ； Jsfiddle Center align