Загрузочный стол не так, как ожидалось

Question

Я использую Bootstrap, чтобы нарисовать простую таблицу с двумя столбцами точно так же, как на странице Bootstrap: http://getbootstrap.com/css/#tables. Для этого я использую JavaScript, чтобы сделать это, как вы можете увидеть здесь:

    $(\"#rep\").empty() 
       $(\"#rep\").append("<br><br><table class=\\"table table-bordered table-striped\\"><tr><th><strong>Title</strong></th><th><strong>Description</strong></th></tr>") 
       //for (var i = 0; i < ratings.length; i++) { 
       for (var key in ratings){ 
         var table = ""; 
         table = "<tr> <th scope=\\"row\\"><code>" 
         table += key 
         table += "</code></th> <td>" 
         table += ratings[key] 
         table += "</td></tr>" 
         $(\"#rep\").append(table); 
        } 
       $(\"#rep\").append("</table>") 
     }, "json") 

Проблема заключается в том, что я не получаю то же самое, и я obtaine таблицу с названиями двух колонок не выровнены с другими строками. Как вы можете видеть здесь:

Кто-нибудь знает, в чем проблема? Спасибо заранее!

Answer 1

Есть несколько проблем с вашим кодом:

1) Вы не используете <colgroup> в качестве начальной загрузки, например. Вот почему таблица не выравнивается правильно.

2) Вы не используете <thead> или <tbody> вообще, это еще одна причина, почему таблица не выровнена правильно, и причина, по которой ваша таблица .table-striped не чередуется. CSS для чередования строк -

.table-striped > tbody > tr:nth-of-type(odd) { 
    background-color: #F9F9F9; 
} 

Сказав это, почему вы регенерируете всю таблицу с нуля? Я бы опустошить <tbody> только:

$("#rep table tbody").empty(); 

, а затем просто добавлять новые строки, например:

var tr = 
    '<tr>'+ 
    '<th scope="row">'+ 
     '<code>'+key+'</code>'+ 
     '</th>'+ 
     '<td>'+ratings[key]+'</td>'+ 
    '</tr>'; 
    $("#rep table tbody").append(tr); 

здесь является демонстрация ->http://jsfiddle.net/j11mj21x/