Check out my custom ajax function below that generates a dynamic table:
$(function() {
var table = $('<table id="table2">');
$.each(data, function(i, item) {
var $tr = $('<tr>').append(
$('<td>').text(item.place.id),
$('<td>').text(item.date),
);
var $tr2 = $('<tr>').append(
$('<td>').text(item.first),
$('<td>').text(item.second));
table.append($tr);
table.append($tr2);
$('#review').append(table);
});
Below is the snippet of my corresponding CSS:
#table2 {
border-collapse: separate;
border-spacing:1px 5px;
}
You can see the output in the following image link:
https://i.sstatic.net/96tdB.png
My concern is with the uneven spacing between rows in the table. The titles "First Direct..", "First Canadian", "Secondig..","Third...", and "Fourth..." are meant to group their respective content. I'd prefer to have the "Kids friendly, green" closer to "First Direct..." than to "First canadian".
I've experimented with different values for border-spacing, but it hasn't resolved the issue.