I am currently using Bootstrap to create a basic two-column table similar to the one on the Bootstrap website here: http://getbootstrap.com/css/#tables. To achieve this, I have implemented a javascript function to display the table as shown below:
$(\"#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 issue I'm encountering is that the table I generate does not match the desired format, with the column titles appearing misaligned from the rest of the rows. It looks like this:
Could someone please help me identify what might be causing this problem? Thank you in advance!