Центрирование всю таблицу в своей внешней DIV

У меня есть DIV:Центрирование всю таблицу в своей внешней 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; 
}

но не имеет успеха. Есть идеи? Вот скрипку:

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

Благодаря

источник

2015-03-26 user1282637

Все строки и столбцы таблицы не добавляются в таблицу –

Я согласен. "" get прилагается к "", "" get присоединен к "

" и "

" добавляется к таблице Контейнер. Сначала создайте структуру справа, а затем отформатируйте стрельбу. –

Если вы просматриваете исходный код своего кода после его добавления, то тег

не закрыт. Он закрыт за пределами формирования

. –

ответ

Изменить код, как этот

$(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; 
}

Вот скрипка; Jsfiddle Center align

источник

2015-03-26 02:36:27

Большое спасибо за помощь, я был настолько сосредоточен на том, что CSS не работает, и не понимал, что это мог быть мой HTML – user1282637

ответ

Смежные вопросы