CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Othmane
Othmane

Reputation: 1124

A bootstrap table not as expected

I am using Bootstrap to draw a simple two-columns table exactly as the one in the Bootstrap page: http://getbootstrap.com/css/#tables. What is desired For that I am using a javascript to render it as you can see here:

                 $(\"#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")

The problem is that I don't get the same, and I obtaine a table with the two columns' titles not aligned with the other rows. Like you can see here: What I obtain

Does anyone know what could be the problem ? Thank you in advance !

Upvotes: 1

Views: 487

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

There are several issues with your code :

1) You are not using <colgroup> as the bootstrap example. Thats why the table not is aligned properly.

2) You are not using <thead> or <tbody> at all, thats another reason why the table not is aligned properly, and the reason why your .table-striped table not is striped. The CSS for striping the rows is

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

Having said this, why are you regenerating the entire table from scratch? I would empty <tbody> only :

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

and then just append new rows, like this :

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

here is a demonstration -> http://jsfiddle.net/j11mj21x/

Upvotes: 2

Related Questions