如何将表格显示在另一个旁边

Question

代码

$(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)
    });
  });
});

使用此代码，动态创建的表格会在另一个下面显示，但我希望它们一个接一个地显示。

如何解决这个问题？任何解决方案都将不胜感激。

Answer 1

在您的CSS中，只需将table元素设置为display: inline-table：

即可

table {
    display: inline-table;
}

在旁注中，</br>不是<table>的有效孩子。

Answer 2

由于table是块级元素，因此要将它们彼此对齐，您可以选择display:inline-table，也可以为两个表选择float:left。并且父项必须使用clear fix method来移除浮动。