CODEWITHSUNDEEP
javascriptcsshtml
Loretta V
Loretta V

Reputation: 71

How to display the tables one next to the other

Code

$(function() {
  var dmJSON = "data.json";

  $.getJSON(dmJSON, function(data) {
    $.each(data.records, function(i, f) {
      var $table = "<table border=5></br><tbody><tr>"
        + "<td>" + f.Clue + "</td></tr>"
        + "<tr><td>" + f.Answer + "</td></tr>"
        + "<tr><td>" + f.Status + "</td></tr>"
        + "<tr><td> " + f.Views + "</td></tr>"
        + "</tbody></table>";

      $("#entrydata").append($table)
    });
  });
});

With this code the dynamically created tables are displaying one below the other but I want them to be displayed one next to the other.

How to solve this? Any solution to this would be appreciated.

Upvotes: 1

Views: 51

Answers (2)

Kheema Pandey
Kheema Pandey

Reputation: 10285

As table are block level elements so to aligned them next to each other you can choose display:inline-table or also can choose float:left for both tables. And Parents Items must have use clear fix method to remove the floating.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128836

In your CSS, simply set your table element to display: inline-table:

table {
    display: inline-table;
}

On a side note, </br> is not a valid child of <table>.

Upvotes: 1

Related Questions